@atlaskit/editor-common 66.0.1 → 66.0.2

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @atlaskit/editor-common
 
+## 66.0.2
+
+### Patch Changes
+
+- [`c827226316a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c827226316a) - ED-14291 removed deprecated themeProvider
+- [`b29ce16dad8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b29ce16dad8) - [ED-14606] Move bitbucket schema, confluence schema, jira schema, and default schema from @atlaskit/adf-schema to their own entry points. These new entry points are as follows
+
+  @atlaskit/adf-schema/schema-bitbucket for:
+
+  - bitbucketSchema
+
+  @atlaskit/adf-schema/schema-confluence for:
+
+  - confluenceSchema
+  - confluenceSchemaWithMediaSingle
+
+  @atlaskit/adf-schema/schema-jira for:
+
+  - default as createJIRASchema
+  - isSchemaWithLists
+  - isSchemaWithMentions
+  - isSchemaWithEmojis
+  - isSchemaWithLinks
+  - isSchemaWithAdvancedTextFormattingMarks
+  - isSchemaWithCodeBlock
+  - isSchemaWithBlockQuotes
+  - isSchemaWithMedia
+  - isSchemaWithSubSupMark
+  - isSchemaWithTextColor
+  - isSchemaWithTables
+
+  @atlaskit/adf-schema/schema-default for:
+
+  - defaultSchema
+  - getSchemaBasedOnStage
+  - defaultSchemaConfig
+
+  This change also includes codemods in @atlaskit/adf-schema to update these entry points. It also introduces a new util function "changeImportEntryPoint" to @atlaskit/codemod-utils to handle this scenario.
+
+- [`3ef794dc11f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ef794dc11f) - Removed emoji and media packages dependencies from renderer initial load.
+- Updated dependencies
+
 ## 66.0.1
 
 ### Patch Changes

package/dist/cjs/panel.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PanelSharedCssClassName", {
+  enumerable: true,
+  get: function get() {
+    return _panel.PanelSharedCssClassName;
+  }
+});
+Object.defineProperty(exports, "PanelSharedSelectors", {
+  enumerable: true,
+  get: function get() {
+    return _panel.PanelSharedSelectors;
+  }
+});
+Object.defineProperty(exports, "darkPanelColors", {
+  enumerable: true,
+  get: function get() {
+    return _panel.darkPanelColors;
+  }
+});
+Object.defineProperty(exports, "getPanelBackgroundDarkModeColors", {
+  enumerable: true,
+  get: function get() {
+    return _panel.getPanelBackgroundDarkModeColors;
+  }
+});
+Object.defineProperty(exports, "getPanelDarkColor", {
+  enumerable: true,
+  get: function get() {
+    return _panel.getPanelDarkColor;
+  }
+});
+Object.defineProperty(exports, "getPanelTypeBackground", {
+  enumerable: true,
+  get: function get() {
+    return _panel.getPanelTypeBackground;
+  }
+});
+Object.defineProperty(exports, "panelSharedStyles", {
+  enumerable: true,
+  get: function get() {
+    return _panel.panelSharedStyles;
+  }
+});
+Object.defineProperty(exports, "panelSharedStylesWithoutPrefix", {
+  enumerable: true,
+  get: function get() {
+    return _panel.panelSharedStylesWithoutPrefix;
+  }
+});
+
+var _panel = require("./styles/shared/panel");

package/dist/cjs/styles/index.js

@@ -21,18 +21,6 @@ Object.defineProperty(exports, "DateSharedCssClassName", {
     return _date.DateSharedCssClassName;
   }
 });
-Object.defineProperty(exports, "PanelSharedCssClassName", {
-  enumerable: true,
-  get: function get() {
-    return _panel.PanelSharedCssClassName;
-  }
-});
-Object.defineProperty(exports, "PanelSharedSelectors", {
-  enumerable: true,
-  get: function get() {
-    return _panel.PanelSharedSelectors;
-  }
-});
 Object.defineProperty(exports, "SmartCardSharedCssClassName", {
   enumerable: true,
   get: function get() {
@@ -93,36 +81,12 @@ Object.defineProperty(exports, "columnLayoutSharedStyle", {
     return _columnLayout.columnLayoutSharedStyle;
   }
 });
-Object.defineProperty(exports, "darkPanelColors", {
-  enumerable: true,
-  get: function get() {
-    return _panel.darkPanelColors;
-  }
-});
 Object.defineProperty(exports, "dateSharedStyle", {
   enumerable: true,
   get: function get() {
     return _date.dateSharedStyle;
   }
 });
-Object.defineProperty(exports, "getPanelBackgroundDarkModeColors", {
-  enumerable: true,
-  get: function get() {
-    return _panel.getPanelBackgroundDarkModeColors;
-  }
-});
-Object.defineProperty(exports, "getPanelDarkColor", {
-  enumerable: true,
-  get: function get() {
-    return _panel.getPanelDarkColor;
-  }
-});
-Object.defineProperty(exports, "getPanelTypeBackground", {
-  enumerable: true,
-  get: function get() {
-    return _panel.getPanelTypeBackground;
-  }
-});
 Object.defineProperty(exports, "headingsSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -153,12 +117,6 @@ Object.defineProperty(exports, "mediaSingleSharedStyle", {
     return _mediaSingle.mediaSingleSharedStyle;
   }
 });
-Object.defineProperty(exports, "panelSharedStyles", {
-  enumerable: true,
-  get: function get() {
-    return _panel.panelSharedStyles;
-  }
-});
 Object.defineProperty(exports, "paragraphSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -276,8 +234,6 @@ var _blockquote = require("./shared/blockquote");
 
 var _headings = require("./shared/headings");
 
-var _panel = require("./shared/panel");
-
 var _rule = require("./shared/rule");
 
 var _whitespace = require("./shared/whitespace");

package/dist/cjs/styles/shared/panel.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPanelDarkColor = exports.getPanelBackgroundDarkModeColors = exports.darkPanelColors = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
 exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
-exports.panelSharedStyles = exports.getPanelTypeBackground = void 0;
+exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackground = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -31,7 +31,7 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject;
+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); }
 
@@ -218,10 +218,16 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   };
 };
 
-var panelSharedStyles = function panelSharedStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", "px;\n    margin: ", " 0 0;\n    padding: ", "px;\n    min-width: ", "px;\n    display: flex;\n    position: relative;\n    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      text-align: center;\n      user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline-flex;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n\n        // Vertical align only works for inline-block elements in Firefox\n        @-moz-document url-prefix() {\n          img {\n            display: inline-block;\n          }\n        }\n      }\n    }\n\n    .ak-editor-panel__content {\n      margin: 1px 0 1px;\n      flex: 1 0 0;\n      /*\n        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n      */\n      min-width: 0;\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", ";\n    }\n  }\n"])), PanelSharedCssClassName.prefix, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)(), _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO)(props), PanelSharedCssClassName.icon, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), iconDynamicStyles(_adfSchema.PanelType.INFO)(props), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE)(props), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP)(props), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING)(props), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR)(props), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
+var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", "px;\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", "px;\n    width: ", "px;\n    box-sizing: content-box;\n    padding-right: ", "px;\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)(), _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO)(props), PanelSharedCssClassName.icon, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), iconDynamicStyles(_adfSchema.PanelType.INFO)(props), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE)(props), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP)(props), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING)(props), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR)(props), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
     dark: getPanelBackgroundDarkModeColors
   })(props));
 };
 
+exports.panelSharedStylesWithoutPrefix = panelSharedStylesWithoutPrefix;
+
+var panelSharedStyles = function panelSharedStyles(props) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
+};
+
 exports.panelSharedStyles = panelSharedStyles;

package/dist/cjs/ui/BaseTheme/index.js

@@ -17,8 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _styledComponents = require("styled-components");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _components = require("@atlaskit/theme/components");
@@ -76,9 +74,7 @@ function BaseThemeWrapper(_ref) {
   }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
     theme: memoizedTheme
-  }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: memoizedTheme
-  }, children));
+  }, children);
 }
 
 function BaseTheme(_ref3) {

package/dist/cjs/utils/validator.js

@@ -13,6 +13,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
+var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
+
 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; }
@@ -63,7 +65,7 @@ var isSameMark = function isSameMark(mark, otherMark) {
 exports.isSameMark = isSameMark;
 
 var getValidDocument = function getValidDocument(doc) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   var node = getValidNode(doc, schema, adfStage);
 
@@ -88,7 +90,7 @@ var wrapInlineNodes = function wrapInlineNodes() {
 };
 
 var getValidContent = function getValidContent(content) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   return content.map(function (node) {
     return getValidNode(node, schema, adfStage);
@@ -101,7 +103,7 @@ var RELATIVE_LINK = /^\//;
 var ANCHOR_LINK = /^#/;
 
 var flattenUnknownBlockTree = function flattenUnknownBlockTree(node) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   var output = [];
   var isPrevLeafNode = false;
@@ -210,7 +212,7 @@ var getValidMarks = function getValidMarks(marks) {
 
 
 var getValidNode = function getValidNode(originalNode) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   var attrs = originalNode.attrs,
       marks = originalNode.marks,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "66.0.1",
+	"version": "66.0.2",
 	"sideEffects": false
 }

package/dist/es2019/panel.js

@@ -0,0 +1 @@
+export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './styles/shared/panel';

package/dist/es2019/styles/index.js

@@ -5,7 +5,6 @@ export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
 export { blockquoteSharedStyles } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './shared/panel';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';

package/dist/es2019/styles/shared/panel.js

@@ -173,107 +173,110 @@ const mainDynamicStyles = panelType => props => {
   `;
 };
 
-export const panelSharedStyles = props => css`
-  .${PanelSharedCssClassName.prefix} {
-    border-radius: ${borderRadius()}px;
-    margin: ${blockNodesVerticalMargin} 0 0;
-    padding: ${gridSize()}px;
-    min-width: ${akEditorTableCellMinWidth}px;
-    display: flex;
-    position: relative;
-    align-items: baseline;
-    word-break: break-word;
+export const panelSharedStylesWithoutPrefix = props => css`
+  border-radius: ${borderRadius()}px;
+  margin: ${blockNodesVerticalMargin} 0 0;
+  padding: ${gridSize()}px;
+  min-width: ${akEditorTableCellMinWidth}px;
+  display: flex;
+  position: relative;
+  align-items: baseline;
+  word-break: break-word;
 
-    ${mainDynamicStyles(PanelType.INFO)(props)}
+  ${mainDynamicStyles(PanelType.INFO)(props)}
 
-    .${PanelSharedCssClassName.icon} {
-      flex-shrink: 0;
-      height: ${gridSize() * 3}px;
-      width: ${gridSize() * 3}px;
-      box-sizing: content-box;
-      padding-right: ${gridSize()}px;
-      text-align: center;
-      user-select: none;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      -ms-user-select: none;
-      ${iconDynamicStyles(PanelType.INFO)(props)}
+  .${PanelSharedCssClassName.icon} {
+    flex-shrink: 0;
+    height: ${gridSize() * 3}px;
+    width: ${gridSize() * 3}px;
+    box-sizing: content-box;
+    padding-right: ${gridSize()}px;
+    text-align: center;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    ${iconDynamicStyles(PanelType.INFO)(props)}
 
-      > span {
-        vertical-align: middle;
-        display: inline-flex;
-      }
+    > span {
+      vertical-align: middle;
+      display: inline-flex;
+    }
 
-      .${emojiSprite} {
-        vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
-      }
+    .${emojiSprite} {
+      vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
+    }
 
-      .${emojiImage} {
-        vertical-align: ${panelEmojiImageVerticalAlignment}px;
+    .${emojiImage} {
+      vertical-align: ${panelEmojiImageVerticalAlignment}px;
 
-        // Vertical align only works for inline-block elements in Firefox
-        @-moz-document url-prefix() {
-          img {
-            display: inline-block;
-          }
+      // Vertical align only works for inline-block elements in Firefox
+      @-moz-document url-prefix() {
+        img {
+          display: inline-block;
         }
       }
     }
+  }
 
-    .ak-editor-panel__content {
-      margin: 1px 0 1px;
-      flex: 1 0 0;
-      /*
-        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
-        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
-      */
-      min-width: 0;
-    }
+  .ak-editor-panel__content {
+    margin: 1px 0 1px;
+    flex: 1 0 0;
+    /*
+      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
+      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
+    */
+    min-width: 0;
+  }
 
-    &[data-panel-type='${PanelType.NOTE}'] {
-      ${mainDynamicStyles(PanelType.NOTE)(props)}
+  &[data-panel-type='${PanelType.NOTE}'] {
+    ${mainDynamicStyles(PanelType.NOTE)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.NOTE)(props)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.NOTE)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.TIP}'] {
-      ${mainDynamicStyles(PanelType.TIP)(props)}
+  &[data-panel-type='${PanelType.TIP}'] {
+    ${mainDynamicStyles(PanelType.TIP)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.TIP)(props)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.TIP)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.WARNING}'] {
-      ${mainDynamicStyles(PanelType.WARNING)(props)}
+  &[data-panel-type='${PanelType.WARNING}'] {
+    ${mainDynamicStyles(PanelType.WARNING)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.WARNING)(props)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.WARNING)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.ERROR}'] {
-      ${mainDynamicStyles(PanelType.ERROR)(props)}
+  &[data-panel-type='${PanelType.ERROR}'] {
+    ${mainDynamicStyles(PanelType.ERROR)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.ERROR)(props)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.ERROR)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.SUCCESS}'] {
-      ${mainDynamicStyles(PanelType.SUCCESS)(props)}
+  &[data-panel-type='${PanelType.SUCCESS}'] {
+    ${mainDynamicStyles(PanelType.SUCCESS)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.SUCCESS)(props)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.SUCCESS)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.CUSTOM}'] {
-      ${themed({
+  &[data-panel-type='${PanelType.CUSTOM}'] {
+    ${themed({
   dark: getPanelBackgroundDarkModeColors
 })(props)};
-    }
+  }
+`;
+export const panelSharedStyles = props => css`
+  .${PanelSharedCssClassName.prefix} {
+    ${panelSharedStylesWithoutPrefix(props)}
   }
 `;

package/dist/es2019/ui/BaseTheme/index.js

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { ThemeProvider } from '@emotion/react';
-import { ThemeProvider as DeprecatedThemeProvider } from 'styled-components';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
@@ -50,9 +49,7 @@ export function BaseThemeWrapper({
   }), [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
-  }, /*#__PURE__*/React.createElement(DeprecatedThemeProvider, {
-    theme: memoizedTheme
-  }, children));
+  }, children);
 }
 export function BaseTheme({
   children,

package/dist/es2019/utils/validator.js

@@ -1,4 +1,5 @@
-import { defaultSchema, inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 export const ADFStages = {
   FINAL: 'final',
   STAGE_0: 'stage0'

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "66.0.1",
+	"version": "66.0.2",
 	"sideEffects": false
 }

package/dist/esm/panel.js

@@ -0,0 +1 @@
+export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './styles/shared/panel';

package/dist/esm/styles/index.js

@@ -5,7 +5,6 @@ export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
 export { blockquoteSharedStyles } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './shared/panel';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';

package/dist/esm/styles/shared/panel.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
@@ -181,8 +181,11 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   };
 };
 
-export var panelSharedStyles = function panelSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", "px;\n    margin: ", " 0 0;\n    padding: ", "px;\n    min-width: ", "px;\n    display: flex;\n    position: relative;\n    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      text-align: center;\n      user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline-flex;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n\n        // Vertical align only works for inline-block elements in Firefox\n        @-moz-document url-prefix() {\n          img {\n            display: inline-block;\n          }\n        }\n      }\n    }\n\n    .ak-editor-panel__content {\n      margin: 1px 0 1px;\n      flex: 1 0 0;\n      /*\n        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n      */\n      min-width: 0;\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", ";\n    }\n  }\n"])), PanelSharedCssClassName.prefix, borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO)(props), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO)(props), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE)(props), PanelType.TIP, mainDynamicStyles(PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP)(props), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING)(props), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR)(props), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS)(props), PanelType.CUSTOM, themed({
+export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", "px;\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", "px;\n    width: ", "px;\n    box-sizing: content-box;\n    padding-right: ", "px;\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO)(props), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO)(props), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE)(props), PanelType.TIP, mainDynamicStyles(PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP)(props), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING)(props), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR)(props), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS)(props), PanelType.CUSTOM, themed({
     dark: getPanelBackgroundDarkModeColors
   })(props));
+};
+export var panelSharedStyles = function panelSharedStyles(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
 };

package/dist/esm/ui/BaseTheme/index.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
 import { ThemeProvider } from '@emotion/react';
-import { ThemeProvider as DeprecatedThemeProvider } from 'styled-components';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
@@ -51,9 +50,7 @@ export function BaseThemeWrapper(_ref) {
   }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
-  }, /*#__PURE__*/React.createElement(DeprecatedThemeProvider, {
-    theme: memoizedTheme
-  }, children));
+  }, children);
 }
 export function BaseTheme(_ref3) {
   var children = _ref3.children,

package/dist/esm/utils/validator.js

@@ -5,7 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-import { defaultSchema, inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 export var ADFStages = {
   FINAL: 'final',
   STAGE_0: 'stage0'

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "66.0.1",
+	"version": "66.0.2",
 	"sideEffects": false
 }

package/dist/types/panel.d.ts

@@ -0,0 +1 @@
+export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './styles/shared/panel';

package/dist/types/provider-factory/media-provider.d.ts

@@ -1,5 +1,5 @@
-import { MediaClientConfig } from '@atlaskit/media-core/auth';
-import { UploadParams } from '@atlaskit/media-picker/types';
+import type { MediaClientConfig } from '@atlaskit/media-core/auth';
+import type { UploadParams } from '@atlaskit/media-picker/types';
 export declare type MediaProvider = {
     uploadParams?: UploadParams;
     /**

package/dist/types/provider-factory/types.d.ts

@@ -1,5 +1,5 @@
 import { ActivityProvider } from '@atlaskit/activity-provider';
-import { EmojiProvider } from '@atlaskit/emoji/types';
+import type { EmojiProvider } from '@atlaskit/emoji/types';
 import { MentionProvider } from '@atlaskit/mention/types';
 import { TaskDecisionProvider } from '@atlaskit/task-decision/types';
 import { CollabEditProvider } from '../collab/types';

package/dist/types/styles/index.d.ts

@@ -5,7 +5,6 @@ export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName, } from './shared/media-single';
 export { blockquoteSharedStyles } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './shared/panel';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';

package/dist/types/styles/shared/panel.d.ts

@@ -79,4 +79,5 @@ export declare const PanelSharedSelectors: {
     yellowWarningIcon: string;
 };
 export declare const getPanelTypeBackground: (panelType: Exclude<PanelType, PanelType.CUSTOM>, props?: ThemeProps) => string;
+export declare const panelSharedStylesWithoutPrefix: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const panelSharedStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/dist/types/ui/EventHandlers/index.d.ts

@@ -1,6 +1,6 @@
 import { SyntheticEvent } from 'react';
-import { CardEvent } from '@atlaskit/media-card';
-import { Identifier } from '@atlaskit/media-client';
+import type { CardEvent } from '@atlaskit/media-card';
+import type { Identifier } from '@atlaskit/media-client';
 export interface CardSurroundings {
     collectionName: string;
     list: Identifier[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "66.0.1",
+  "version": "66.0.2",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,28 +39,29 @@
     "./mention": "./src/mention.ts",
     "./provider-helpers": "./src/provider-helpers/index.ts",
     "./icons": "./src/icons/index.ts",
-    "./safe-plugin": "./src/safe-plugin/index.ts"
+    "./safe-plugin": "./src/safe-plugin/index.ts",
+    "./panel": "./src/panel.ts"
   },
   "dependencies": {
     "@atlaskit/activity-provider": "^2.3.0",
-    "@atlaskit/adf-schema": "^22.1.0",
+    "@atlaskit/adf-schema": "^23.0.0",
     "@atlaskit/adf-utils": "^16.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^2.0.0",
-    "@atlaskit/emoji": "^64.4.0",
+    "@atlaskit/emoji": "^64.5.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-card": "^73.4.0",
+    "@atlaskit/media-card": "^73.5.0",
     "@atlaskit/media-client": "^15.0.0",
-    "@atlaskit/media-picker": "^60.0.0",
+    "@atlaskit/media-picker": "^61.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/profilecard": "^16.4.0",
     "@atlaskit/smart-card": "^18.0.0",
     "@atlaskit/smart-user-picker": "^5.0.2",
-    "@atlaskit/task-decision": "^17.3.0",
+    "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
@@ -86,8 +87,7 @@
     "@atlaskit/media-core": "^32.3.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/editor-json-transformer": "^8.7.0",

package/panel/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/editor-common/panel",
+  "main": "../dist/cjs/panel.js",
+  "module": "../dist/esm/panel.js",
+  "module:es2019": "../dist/es2019/panel.js",
+  "types": "../dist/types/panel.d.ts"
+}