@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/cjs/plugins/card/ui/link-toolbar-button-group-options.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getButtonGroupOption = void 0;
+
+var _messages = require("../messages");
+
+var _card = require("./assets/card");
+
+var _embed = require("./assets/embed");
+
+var _inline = require("./assets/inline");
+
+var _url = require("./assets/url");
+
+var appearancePropsMap = {
+  url: {
+    title: _messages.messages.urlTitle,
+    icon: _url.IconUrl
+  },
+  inline: {
+    title: _messages.messages.inlineTitle,
+    icon: _inline.IconInline
+  },
+  block: {
+    title: _messages.messages.blockTitle,
+    icon: _card.IconCard
+  },
+  embed: {
+    title: _messages.messages.embedTitle,
+    icon: _embed.IconEmbed
+  }
+};
+
+var getButtonGroupOption = function getButtonGroupOption(intl, dispatchCommand, _ref) {
+  var disabled = _ref.disabled,
+      _onClick = _ref.onClick,
+      selected = _ref.selected,
+      appearance = _ref.appearance,
+      testId = _ref.testId,
+      tooltip = _ref.tooltip;
+  var _appearancePropsMap = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'],
+      title = _appearancePropsMap.title,
+      icon = _appearancePropsMap.icon;
+  return {
+    title: intl.formatMessage(title),
+    icon: icon,
+    onClick: function onClick() {
+      return dispatchCommand(_onClick);
+    },
+    disabled: Boolean(disabled),
+    tooltipContent: tooltip || null,
+    testId: testId,
+    selected: selected
+  };
+};
+
+exports.getButtonGroupOption = getButtonGroupOption;

package/dist/cjs/plugins/card/ui/link-toolbar-icon-dropdown-options.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIconDropdownOption = void 0;
+
+var _messages = require("../messages");
+
+var _card = require("./assets/card");
+
+var _embed = require("./assets/embed");
+
+var _inline = require("./assets/inline");
+
+var _url = require("./assets/url");
+
+var appearancePropsMap = {
+  url: {
+    title: _messages.messages.urlTitle,
+    description: _messages.messages.urlDescription,
+    icon: _url.IconUrl
+  },
+  inline: {
+    title: _messages.messages.inlineTitle,
+    description: _messages.messages.inlineDescription,
+    icon: _inline.IconInline
+  },
+  block: {
+    title: _messages.messages.blockTitle,
+    description: _messages.messages.blockDescription,
+    icon: _card.IconCard
+  },
+  embed: {
+    title: _messages.messages.embedTitle,
+    description: _messages.messages.embedDescription,
+    icon: _embed.IconEmbed
+  }
+};
+
+var getIconDropdownOption = function getIconDropdownOption(intl, dispatchCommand, _ref) {
+  var disabled = _ref.disabled,
+      _onClick = _ref.onClick,
+      selected = _ref.selected,
+      appearance = _ref.appearance,
+      testId = _ref.testId,
+      tooltip = _ref.tooltip;
+  var _appearancePropsMap = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'],
+      title = _appearancePropsMap.title,
+      description = _appearancePropsMap.description,
+      icon = _appearancePropsMap.icon;
+  return {
+    title: intl.formatMessage(title),
+    description: intl.formatMessage(description),
+    icon: icon,
+    onClick: function onClick() {
+      return dispatchCommand(_onClick);
+    },
+    selected: Boolean(selected),
+    disabled: Boolean(disabled),
+    tooltipContent: tooltip,
+    testId: testId
+  };
+};
+
+exports.getIconDropdownOption = getIconDropdownOption;

package/dist/cjs/plugins/card/ui/styled.js

@@ -2,26 +2,18 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedCardStyles = exports.EmbedSpacing = void 0;
+exports.embedSpacingStyles = exports.embedCardStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject, _templateObject2;
 
-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; }
-
-var embedCardStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .embedCardView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right']\n      + .embedCardView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n  }\n"])));
+var embedCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .embedCardView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right']\n      + .embedCardView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n  }\n"])));
 exports.embedCardStyles = embedCardStyles;
-
-var EmbedSpacing = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 10px;\n"])));
-
-exports.EmbedSpacing = EmbedSpacing;
+var embedSpacingStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 10px;\n"])));
+exports.embedSpacingStyles = embedSpacingStyles;

package/dist/cjs/plugins/card/ui/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/plugins/clipboard/pm-plugins/main.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sendClipboardAnalytics = exports.createPlugin = void 0;
+exports.sendClipboardAnalytics = exports.createPlugin = exports.createClipboardSerializer = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _prosemirrorState = require("prosemirror-state");
@@ -19,10 +21,33 @@ var _utils = require("../../selection/utils");
 
 var _enums = require("../../analytics/types/enums");
 
+var _prosemirrorModel = require("prosemirror-model");
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+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; }
+
 var createPlugin = function createPlugin(_ref) {
-  var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+      schema = _ref.schema;
+  var editorView;
+
+  var getEditorView = function getEditorView() {
+    return editorView;
+  };
+
   return new _safePlugin.SafePlugin({
     key: _pluginKey.clipboardPluginKey,
+    view: function view(_view) {
+      editorView = _view;
+      return {
+        update: function update(view) {
+          editorView = view;
+        }
+      };
+    },
     props: {
       handleDOMEvents: {
         cut: function cut(view) {
@@ -31,13 +56,84 @@ var createPlugin = function createPlugin(_ref) {
         copy: function copy(view) {
           return sendClipboardAnalytics(view, dispatchAnalyticsEvent, _enums.ACTION.COPIED);
         }
-      }
+      },
+      clipboardSerializer: createClipboardSerializer(schema, getEditorView)
     }
   });
 };
+/**
+ * Overrides Prosemirror's default clipboardSerializer, in order to fix table row copy/paste bug raised in ED-13003.
+ * This allows us to store the original table’s attributes on the new table that the row is wrapped with when it is being copied.
+ * e.g. keeping the layout on a row that is copied.
+ * We store the default serializer in order to call it after we handle the table row case.
+ */
+
 
 exports.createPlugin = createPlugin;
 
+var createClipboardSerializer = function createClipboardSerializer(schema, getEditorView) {
+  var oldSerializer = _prosemirrorModel.DOMSerializer.fromSchema(schema);
+
+  var newSerializer = new _prosemirrorModel.DOMSerializer(oldSerializer.nodes, oldSerializer.marks);
+  var originalSerializeFragment = newSerializer.serializeFragment.bind(newSerializer);
+
+  newSerializer.serializeFragment = function (content) {
+    var _content$firstChild;
+
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var target = arguments.length > 2 ? arguments[2] : undefined;
+    var editorView = getEditorView();
+    var selection = editorView.state.selection; // We do not need to handle when a user copies a tableRow + other content.
+    // In that scenario it already wraps the Row with correct Table and attributes.
+
+    if (!options.tableWrapperExists) {
+      var i = 0;
+
+      while (i < content.childCount) {
+        var _content$maybeChild;
+
+        if (((_content$maybeChild = content.maybeChild(i)) === null || _content$maybeChild === void 0 ? void 0 : _content$maybeChild.type.name) === 'table') {
+          options.tableWrapperExists = true;
+          break;
+        }
+
+        i++;
+      }
+    } // When the content being copied includes a tableRow that is not already wrapped with a table,
+    // We will wrap it with one ourselves, while preserving the parent table's attributes.
+
+
+    if (((_content$firstChild = content.firstChild) === null || _content$firstChild === void 0 ? void 0 : _content$firstChild.type.name) === 'tableRow' && !options.tableWrapperExists) {
+      // We only want 1 table wrapping the rows.
+      // tableWrapperExist is a custom prop added solely for the purposes of this recursive algorithm.
+      // The function is recursively called for each node in the tree captured in the fragment.
+      // For recursive logic see the bind call above and the prosemirror-model (https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L44
+      // and https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L87)
+      options.tableWrapperExists = true;
+      var parentTable = (0, _prosemirrorUtils.findParentNodeOfType)(schema.nodes.table)(selection);
+      var attributes = parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs;
+      var newTable = schema.nodes.table;
+      var newTableNode = newTable.createChecked(_objectSpread({}, attributes), content);
+
+      var newContent = _prosemirrorModel.Fragment.from(newTableNode); // Pass updated content into original ProseMirror serializeFragment function.
+      // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+      //@ts-ignore
+
+
+      return originalSerializeFragment(newContent, options, target);
+    } // If we're not copying any rows, just run default serializeFragment function.
+    // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+    //@ts-ignore
+
+
+    return originalSerializeFragment(content, options, target);
+  };
+
+  return newSerializer;
+};
+
+exports.createClipboardSerializer = createClipboardSerializer;
+
 var sendClipboardAnalytics = function sendClipboardAnalytics(view, dispatchAnalyticsEvent, action) {
   var clipboardAnalyticsPayload = getAnalyticsPayload(view.state, action);
 

package/dist/cjs/plugins/code-block/styles.js

@@ -11,7 +11,7 @@ exports.highlightingCodeBlockStyles = exports.codeBlockStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -29,46 +29,53 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var highlightingCodeBlockStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-color: ", ";\n    --ds--code--bg-color: transparent;\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      color: ", ";\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      position: absolute;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      pointer-events: none;\n      overflow: hidden;\n      tab-size: 4;\n\n      & [data-ds--code--code-block] {\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n\n    .", " {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      flex: 1;\n\n      > code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n\n      &[data-debounce='true'] {\n        .", " {\n          display: none;\n        }\n      }\n\n      &:not([data-debounce='true']) {\n        > code:not([data-language='plaintext']):not([data-language='none']):not([data-language='']) {\n          color: transparent;\n          caret-color: ", ";\n        }\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
-  background: (0, _components.themed)({
+var highlightingCodeBlockStyles = function highlightingCodeBlockStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-color: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      color: ", ";\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      position: absolute;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      pointer-events: none;\n      overflow: hidden;\n      tab-size: 4;\n\n      & [data-ds--code--code-block] {\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n\n    .", " {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      flex: 1;\n\n      > code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n\n      &[data-debounce='true'] {\n        .", " {\n          display: none;\n        }\n      }\n\n      &:not([data-debounce='true']) {\n        > code:not([data-language='plaintext']):not([data-language='none']):not([data-language='']) {\n          color: transparent;\n          caret-color: ", ";\n        }\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
+    background: (0, _components.themed)({
+      light: colors.N20,
+      dark: colors.DN50
+    })(props),
+    width: '8px'
+  }), (0, _components.themed)({
     light: colors.N20,
     dark: colors.DN50
-  }),
-  width: '8px'
-}), (0, _components.themed)({
-  light: colors.N20,
-  dark: colors.DN50
-}), _editorSharedStyles.akEditorCodeFontFamily, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, _classNames.codeBlockClassNames.gutter, (0, _components.themed)({
-  light: colors.N30,
-  dark: colors.DN20
-}), (0, _constants.gridSize)(), (0, _components.themed)({
-  light: colors.N90,
-  dark: colors.DN90
-}), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-  light: colors.N400,
-  dark: colors.DN400
-}), _classNames.codeBlockClassNames.highlighting, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _classNames.codeBlockClassNames.content, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), _classNames.codeBlockClassNames.highlighting, (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN500
-}), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, colors.R75, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content, _editorSharedStyles.akEditorDeleteBackground, _classNames.codeBlockClassNames.gutter, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content);
+  })(props), _editorSharedStyles.akEditorCodeFontFamily, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, _classNames.codeBlockClassNames.gutter, (0, _components.themed)({
+    light: colors.N30,
+    dark: colors.DN20
+  })(props), (0, _constants.gridSize)(), (0, _components.themed)({
+    light: colors.N90,
+    dark: colors.DN90
+  })(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+    light: colors.N400,
+    dark: colors.DN400
+  })(props), _classNames.codeBlockClassNames.highlighting, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _classNames.codeBlockClassNames.content, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), _classNames.codeBlockClassNames.highlighting, (0, _components.themed)({
+    light: colors.N800,
+    dark: colors.DN500
+  })(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, colors.R75, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content, _editorSharedStyles.akEditorDeleteBackground, _classNames.codeBlockClassNames.gutter, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content);
+};
+
 exports.highlightingCodeBlockStyles = highlightingCodeBlockStyles;
-var codeBlockStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    --ds--code--bg-color: transparent;\n    background-repeat: no-repeat;\n    background-color: ", ";\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
-  background: (0, _components.themed)({
+
+var codeBlockStyles = function codeBlockStyles(props) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\n    background-color: ", ";\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
+    background: (0, _components.themed)({
+      light: colors.N20,
+      dark: colors.DN50
+    })(props),
+    width: '8px'
+  }), (0, _components.themed)({
     light: colors.N20,
     dark: colors.DN50
-  }),
-  width: '8px'
-}), (0, _components.themed)({
-  light: colors.N20,
-  dark: colors.DN50
-}), _editorSharedStyles.akEditorCodeFontFamily, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, _classNames.codeBlockClassNames.gutter, (0, _components.themed)({
-  light: colors.N30,
-  dark: colors.DN20
-}), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-  light: colors.N400,
-  dark: colors.DN400
-}), _classNames.codeBlockClassNames.content, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN800
-}), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, colors.R75, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content, _editorSharedStyles.akEditorDeleteBackground, _classNames.codeBlockClassNames.gutter, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content);
+  })(props), _editorSharedStyles.akEditorCodeFontFamily, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, _classNames.codeBlockClassNames.gutter, (0, _components.themed)({
+    light: colors.N30,
+    dark: colors.DN20
+  })(props), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+    light: colors.N400,
+    dark: colors.DN400
+  })(props), _classNames.codeBlockClassNames.content, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+    light: colors.N800,
+    dark: colors.DN800
+  })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, colors.R75, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content, _editorSharedStyles.akEditorDeleteBackground, _classNames.codeBlockClassNames.gutter, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content);
+};
+
 exports.codeBlockStyles = codeBlockStyles;

package/dist/cjs/plugins/collab-edit/styles.js

@@ -9,7 +9,7 @@ exports.telepointerStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _pluginState = require("./plugin-state");
 
@@ -23,7 +23,7 @@ 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: #fff;\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
 };
 
-var telepointerStyle = (0, _styledComponents.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: 2px;\n      color: white;\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), _pluginState.TELEPOINTER_DIM_CLASS, _utils.colors.map(function (color, index) {
+var 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: 2px;\n      color: white;\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), _pluginState.TELEPOINTER_DIM_CLASS, _utils.colors.map(function (color, index) {
   return telepointerColorStyle(color, index);
 }));
 exports.telepointerStyle = telepointerStyle;

package/dist/cjs/plugins/collab-edit/ui/avatars.js

@@ -9,6 +9,8 @@ exports.Avatars = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
 var _styles = require("./styles");
@@ -19,6 +21,7 @@ var _utils = require("../utils");
 
 var _featureFlagsContext = require("../../feature-flags-context");
 
+/** @jsx jsx */
 var Avatars = /*#__PURE__*/_react.default.memo(function (props) {
   var sessionId = props.sessionId,
       editorView = props.editorView;
@@ -31,7 +34,9 @@ var Avatars = /*#__PURE__*/_react.default.memo(function (props) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_styles.AvatarContainer, null, /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+  return (0, _react2.jsx)("div", {
+    css: _styles.avatarContainer
+  }, (0, _react2.jsx)(_avatarGroup.default, {
     appearance: "stack",
     size: "medium",
     data: avatars,

package/dist/cjs/plugins/collab-edit/ui/colored-avatar-item.js

@@ -1,23 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ColoredAvatarItem = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _utils = require("../utils");
 
 var _styles = require("./styles");
 
+/** @jsx jsx */
 var ColoredAvatarItem = function ColoredAvatarItem(props) {
   var color = (0, _utils.getAvatarColor)(props.sessionId).color.solid;
   var avatar = props.name.substr(0, 1).toUpperCase();
-  return /*#__PURE__*/_react.default.createElement(_styles.Badge, {
-    color: color,
+  return (0, _react.jsx)("div", {
+    css: (0, _styles.badge)(color),
     "data-testid": "editor-collab-badge"
   }, avatar);
 };

package/dist/cjs/plugins/collab-edit/ui/invite-to-edit.js

@@ -2,12 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InviteToEditButton = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
 
@@ -15,8 +19,13 @@ var _ToolbarButton = _interopRequireDefault(require("../../../ui/ToolbarButton")
 
 var _styles = 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; }
+
+/** @jsx jsx */
 var ID = function ID(props) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
+  return (0, _react2.jsx)(_react.Fragment, null, props.children);
 };
 
 var InviteToEditButton = function InviteToEditButton(props) {
@@ -26,7 +35,7 @@ var InviteToEditButton = function InviteToEditButton(props) {
       title = props.title;
 
   var iconBefore = _react.default.useMemo(function () {
-    return /*#__PURE__*/_react.default.createElement(_add.default, {
+    return (0, _react2.jsx)(_add.default, {
       label: title
     });
   }, [title]);
@@ -36,7 +45,9 @@ var InviteToEditButton = function InviteToEditButton(props) {
   }
 
   var Wrapper = Component ? Component : ID;
-  return /*#__PURE__*/_react.default.createElement(_styles.InviteTeamWrapper, null, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+  return (0, _react2.jsx)("div", {
+    css: _styles.inviteTeamWrapper
+  }, (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_ToolbarButton.default, {
     className: "invite-to-edit",
     onClick: onClick,
     selected: selected,

package/dist/cjs/plugins/collab-edit/ui/styles.js

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InviteTeamWrapper = exports.Badge = exports.AvatarContainer = void 0;
+exports.inviteTeamWrapper = exports.badge = exports.avatarContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -19,17 +19,13 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var InviteTeamWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", "px;\n  margin-left: -", "px;\n"])), _colors.N20, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() / 2);
+var inviteTeamWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", "px;\n  margin-left: -", "px;\n"])), _colors.N20, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() / 2);
+exports.inviteTeamWrapper = inviteTeamWrapper;
+var avatarContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", "px;\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), (0, _constants.gridSize)());
+exports.avatarContainer = avatarContainer;
 
-exports.InviteTeamWrapper = InviteTeamWrapper;
+var badge = function badge(color) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  width: 13px;\n  height: 13px;\n  z-index: ", ";\n  border-radius: 3px;\n  background: ", ";\n  color: #fff;\n  font-size: ", ";\n  line-height: 0;\n  padding-top: 7px;\n  text-align: center;\n  box-shadow: 0 0 1px #fff;\n  box-sizing: border-box;\n"])), _editorSharedStyles.akEditorSmallZIndex, color, (0, _editorSharedStyles.relativeFontSizeToBase16)(9));
+};
 
-var AvatarContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", "px;\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), (0, _constants.gridSize)());
-
-exports.AvatarContainer = AvatarContainer;
-
-var Badge = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  width: 13px;\n  height: 13px;\n  z-index: ", ";\n  border-radius: 3px;\n  background: ", ";\n  color: #fff;\n  font-size: ", ";\n  line-height: 0;\n  padding-top: 7px;\n  text-align: center;\n  box-shadow: 0 0 1px #fff;\n  box-sizing: border-box;\n"])), _editorSharedStyles.akEditorSmallZIndex, function (_ref) {
-  var color = _ref.color;
-  return color;
-}, (0, _editorSharedStyles.relativeFontSizeToBase16)(9));
-
-exports.Badge = Badge;
+exports.badge = badge;