@atlaskit/editor-common 68.0.0 → 69.0.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/editor-common
 
+## 69.0.0
+
+### Major Changes
+
+- [`04589993d81`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04589993d81) - ED-15148: moved duplicate entrypoints from @atlaskit/editor-common/utils to @atlaskit/editor-common/validator
+
+### Minor Changes
+
+- [`8ff3031db06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ff3031db06) - Introduce new optional argument to CardProvider.resolve
+- [`07c8b0b4504`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07c8b0b4504) - [ux] ED-15102 adds a copy button to nodes with floating toolbars
+- [`2d979ce9877`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d979ce9877) - [ux] ED-14945: Add windowed codeblock support in renderer (This feature sits behind a flag in the featureFlags prop 'allow-windowed-code-block')
+- [`04746af08f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04746af08f6) - [ux] ED-15097 added floating toolbar copy button to table
+- [`e4dba654a71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4dba654a71) - [ux] ED-15233: Fix breakout button positioning for breakout supported nodes in scenarios where editor disabled props changes while Editor is visually hidden and redisplayed.
+  Fixed by skipping breakout width update work when the editorView dom element is width 0 (hidden) and deferring LayoutButton position updates to second animation frame (on window
+  and editor resizes).
+- [`11f56527739`](https://bitbucket.org/atlassian/atlassian-frontend/commits/11f56527739) - Export emoji placeholder class name
+
+### Patch Changes
+
+- [`153b80fdcda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/153b80fdcda) - [ux] ED-15111: Fix aligned text and headings margin-top values in layouts in Renderer (by clearing them)
+- Updated dependencies
+
+## 68.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 68.0.1
+
+### Patch Changes
+
+- [`559b6610a0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/559b6610a0e) - Modified some CSS rules to ensure Emotion is compatible with server side rendering.
+- Updated dependencies
+
 ## 68.0.0
 
 ### Major Changes

package/codemods/69.0.0-update-validator-imports.ts

@@ -0,0 +1,7 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { validatorExports, validatorTypes } from './migrates/entry-points';
+
+const transformer = createTransformer([...validatorTypes, ...validatorExports]);
+
+export default transformer;

package/codemods/migrates/entry-points.ts

@@ -0,0 +1,37 @@
+import { changeImportEntryPoint } from '@atlaskit/codemod-utils';
+
+const PACKAGE_NAME = '@atlaskit/editor-common';
+
+export const validatorExports = [
+  'getMarksByOrder',
+  'getValidContent',
+  'getValidDocument',
+  'getValidMark',
+  'getValidNode',
+  'getValidUnknownNode',
+  'isSameMark',
+  'isSubSupType',
+  'markOrder',
+  'ADFStages',
+].map((name) =>
+  changeImportEntryPoint(
+    `${PACKAGE_NAME}/utils`,
+    name,
+    `${PACKAGE_NAME}/validator`,
+  ),
+);
+
+export const validatorTypes = [
+  'ADDoc',
+  'ADFStage',
+  'ADMark',
+  'ADMarkSimple',
+  'ADNode',
+].map((name) =>
+  changeImportEntryPoint(
+    `${PACKAGE_NAME}/utils`,
+    name,
+    `${PACKAGE_NAME}/validator`,
+    true,
+  ),
+);

package/dist/cjs/extensions/manifest-helpers.js

@@ -11,10 +11,10 @@ exports.buildExtensionKeyAndNodeKey = void 0;
 exports.buildNode = buildNode;
 exports.resolveImport = exports.getExtensionKeyAndNodeKey = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

package/dist/cjs/styles/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "AnnotationSharedClassNames", {
     return _annotation.AnnotationSharedClassNames;
   }
 });
+Object.defineProperty(exports, "CodeBlockSharedCssClassName", {
+  enumerable: true,
+  get: function get() {
+    return _codeBlock.CodeBlockSharedCssClassName;
+  }
+});
 Object.defineProperty(exports, "DateSharedCssClassName", {
   enumerable: true,
   get: function get() {
@@ -69,6 +75,12 @@ Object.defineProperty(exports, "calcTableWidth", {
     return _table.calcTableWidth;
   }
 });
+Object.defineProperty(exports, "codeBlockSharedStyles", {
+  enumerable: true,
+  get: function get() {
+    return _codeBlock.codeBlockSharedStyles;
+  }
+});
 Object.defineProperty(exports, "codeMarkSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -258,4 +270,6 @@ var _taskDecision = require("./shared/task-decision");
 
 var _status = require("./shared/status");
 
-var _smartCard = require("./shared/smart-card");
+var _smartCard = require("./shared/smart-card");
+
+var _codeBlock = require("./shared/code-block");

package/dist/cjs/styles/shared/block-marks.js

@@ -13,5 +13,5 @@ var _react = require("@emotion/react");
 
 var _templateObject;
 
-var blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+var blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
 exports.blockMarksSharedStyles = blockMarksSharedStyles;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBlockSharedStyles = exports.CodeBlockSharedCssClassName = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject;
+
+var CodeBlockSharedCssClassName = {
+  CODEBLOCK_CONTAINER: 'code-block',
+  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
+  CODEBLOCK_CONTENT: 'code-content',
+  DS_CODEBLOCK: '[data-ds--code--code-block]'
+};
+exports.CodeBlockSharedCssClassName = CodeBlockSharedCssClassName;
+
+var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    counter-reset: line;\n    display: flex;\n    overflow-x: auto;\n\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\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    margin: ", " 0 0 0;\n    min-width: ", "px;\n    cursor: pointer;\n\n    .", " {\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          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\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        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.neutral', _colors.N20),
+    dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+  })(props), (0, _constants.borderRadius)(), (0, _editorSharedStyles.overflowShadow)({
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    background: (0, _components.themed)({
+      light: _colors.N20,
+      dark: _colors.DN50
+    })(props),
+    width: '8px'
+  }), _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.neutral', _colors.N30),
+    dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
+  })(props), (0, _constants.gridSize)(), (0, _components.themed)({
+    light: (0, _tokens.token)('color.text.subtlest', _colors.N400),
+    dark: (0, _tokens.token)('color.text.subtlest', _colors.DN400)
+  })(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, (0, _components.themed)({
+    light: (0, _tokens.token)('color.text', _colors.N800),
+    dark: (0, _tokens.token)('color.text', _colors.DN800)
+  })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+};
+
+exports.codeBlockSharedStyles = codeBlockSharedStyles;

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

@@ -11,6 +11,7 @@ var EmojiSharedCssClassName = {
   EMOJI_CONTAINER: 'emojiView-content-wrap',
   EMOJI_NODE: _emoji.emojiNode,
   EMOJI_SPRITE: _emoji.emojiSprite,
-  EMOJI_IMAGE: _emoji.emojiImage
+  EMOJI_IMAGE: _emoji.emojiImage,
+  EMOJI_PLACEHOLDER: _emoji.emojiPlaceholder
 };
 exports.EmojiSharedCssClassName = EmojiSharedCssClassName;

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

@@ -178,7 +178,8 @@ var PanelSharedSelectors = {
   emojiPopup: "[aria-label=\"Popup\"]",
   searchEmoji: "[aria-label=\"Search emoji\"]",
   orangeWarningIcon: "[aria-label=\":warning:\"]",
-  yellowWarningIcon: "[aria-label=\":warning:\"]  span:nth-child(1)"
+  yellowWarningIcon: "[aria-label=\":warning:\"]  span:nth-child(1)",
+  copyButton: "button[aria-label=\"Copy\"]"
 };
 exports.PanelSharedSelectors = PanelSharedSelectors;
 

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

@@ -59,7 +59,7 @@ var TableSharedCssClassName = {
 exports.TableSharedCssClassName = TableSharedCssClassName;
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-of-type + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-of-type + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-of-type + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-of-type + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
     light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
     dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
   })(props), (0, _tokens.token)('color.background.neutral.subtle', 'white'), tableCellMinWidth, (0, _components.themed)({

package/dist/cjs/styles/shared/task-decision.js

@@ -19,5 +19,5 @@ var TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'
 };
 exports.TaskDecisionSharedCssClassName = TaskDecisionSharedCssClassName;
-var tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  // If task list is first in the document then set margin top to zero.\n  div[data-task-list-local-id]:first-child {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
+var tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  // If task list is first in the document then set margin top to zero.\n  div[data-task-list-local-id]:first-child,\n  style:first-child + div[data-task-list-local-id] {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
 exports.tasksAndDecisionsStyles = tasksAndDecisionsStyles;

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

@@ -118,7 +118,7 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4152\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > &:first-child {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4152\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
       light: (0, _tokens.token)('color.border', colors.N50A),
       dark: (0, _tokens.token)('color.border', colors.DN50)
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));

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

@@ -41,6 +41,12 @@ 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) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 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; } }
@@ -62,6 +68,7 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rafIds", new Set());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       validPosition: true
     });
@@ -73,8 +80,37 @@ var Popup = /*#__PURE__*/function (_React$Component) {
 
       _this.initPopup(popup);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelRequestAnimationFrames", function () {
+      var _iterator = _createForOfIteratorHelper(_this.rafIds),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var rafId = _step.value;
+          cancelAnimationFrame(rafId);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scheduledUpdatePosition", (0, _rafSchd.default)(function (props) {
-      return _this.updatePosition(props);
+      if (!_this.props.waitForExtraLayoutUpdates) {
+        _this.updatePosition(_this.props);
+      }
+
+      if (_this.props.scheduleExtraLayoutUpdates) {
+        // We need two requestAnimationFrame calls to ensure reflow/repaints
+        // are flushed to DOM before our popup position recalculations happen
+        var rafId = requestAnimationFrame(function () {
+          _this.updatePosition(_this.props);
+
+          _this.rafIds.delete(rafId);
+        });
+
+        _this.rafIds.add(rafId);
+      }
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function () {
       return _this.scheduledUpdatePosition(_this.props);
@@ -237,6 +273,7 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       }
 
       this.scheduledUpdatePosition.cancel();
+      this.cancelRequestAnimationFrames();
     }
   }, {
     key: "renderPopup",

package/dist/cjs/ui/clear-next-sibling-margin-top.js

@@ -5,14 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.clearNextSiblingMarginTopStyle = void 0;
+exports.clearNextSiblingMarginTopStyle = exports.clearNextSiblingBlockMarkMarginTopStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 // We use !important to ensure next sibling gets the margin reset no matter what
-var clearNextSiblingMarginTopStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));
-exports.clearNextSiblingMarginTopStyle = clearNextSiblingMarginTopStyle;
+var marginTopReset = "margin-top: 0 !important;";
+var clearNextSiblingMarginTopStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & + * {\n    ", "\n  }\n"])), marginTopReset);
+exports.clearNextSiblingMarginTopStyle = clearNextSiblingMarginTopStyle;
+var textElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+var nextSiblingBlockMarkContentSelectors = textElements.map(function (elem) {
+  return "+ .fabric-editor-block-mark > ".concat(elem);
+}).join(',');
+var clearNextSiblingBlockMarkMarginTopStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    ", "\n  }\n"])), nextSiblingBlockMarkContentSelectors, marginTopReset);
+exports.clearNextSiblingBlockMarkMarginTopStyle = clearNextSiblingBlockMarkMarginTopStyle;

package/dist/cjs/ui/index.js

@@ -151,6 +151,12 @@ Object.defineProperty(exports, "calcPxFromPct", {
     return _grid.calcPxFromPct;
   }
 });
+Object.defineProperty(exports, "clearNextSiblingBlockMarkMarginTopStyle", {
+  enumerable: true,
+  get: function get() {
+    return _clearNextSiblingMarginTop.clearNextSiblingBlockMarkMarginTopStyle;
+  }
+});
 Object.defineProperty(exports, "clearNextSiblingMarginTopStyle", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/index.js

@@ -167,12 +167,6 @@ Object.defineProperty(exports, "getExtensionRenderer", {
     return _extensionHandler.getExtensionRenderer;
   }
 });
-Object.defineProperty(exports, "getMarksByOrder", {
-  enumerable: true,
-  get: function get() {
-    return _validator.getMarksByOrder;
-  }
-});
 Object.defineProperty(exports, "getModeFromTheme", {
   enumerable: true,
   get: function get() {
@@ -209,36 +203,6 @@ Object.defineProperty(exports, "getUnsupportedContentLevelData", {
     return _analytics.getUnsupportedContentLevelData;
   }
 });
-Object.defineProperty(exports, "getValidContent", {
-  enumerable: true,
-  get: function get() {
-    return _validator.getValidContent;
-  }
-});
-Object.defineProperty(exports, "getValidDocument", {
-  enumerable: true,
-  get: function get() {
-    return _validator.getValidDocument;
-  }
-});
-Object.defineProperty(exports, "getValidMark", {
-  enumerable: true,
-  get: function get() {
-    return _validator.getValidMark;
-  }
-});
-Object.defineProperty(exports, "getValidNode", {
-  enumerable: true,
-  get: function get() {
-    return _validator.getValidNode;
-  }
-});
-Object.defineProperty(exports, "getValidUnknownNode", {
-  enumerable: true,
-  get: function get() {
-    return _validator.getValidUnknownNode;
-  }
-});
 Object.defineProperty(exports, "hasMergedCell", {
   enumerable: true,
   get: function get() {
@@ -263,24 +227,6 @@ Object.defineProperty(exports, "isPerformanceObserverAvailable", {
     return _isPerformanceApiAvailable.isPerformanceObserverAvailable;
   }
 });
-Object.defineProperty(exports, "isSameMark", {
-  enumerable: true,
-  get: function get() {
-    return _validator.isSameMark;
-  }
-});
-Object.defineProperty(exports, "isSubSupType", {
-  enumerable: true,
-  get: function get() {
-    return _validator.isSubSupType;
-  }
-});
-Object.defineProperty(exports, "markOrder", {
-  enumerable: true,
-  get: function get() {
-    return _validator.markOrder;
-  }
-});
 Object.defineProperty(exports, "measureRender", {
   enumerable: true,
   get: function get() {
@@ -376,8 +322,6 @@ var _annotation = require("./annotation");
 
 var _macro = require("./macro");
 
-var _validator = require("./validator");
-
 var _browser = _interopRequireDefault(require("./browser"));
 
 var _errorReporter = _interopRequireDefault(require("./error-reporter"));

package/dist/cjs/validator.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ADFStages", {
+  enumerable: true,
+  get: function get() {
+    return _validator.ADFStages;
+  }
+});
 Object.defineProperty(exports, "getMarksByOrder", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

package/dist/es2019/styles/index.js

@@ -17,4 +17,5 @@ export { shadowSharedStyle } from './shared/shadow';
 export { dateSharedStyle, DateSharedCssClassName } from './shared/date';
 export { tasksAndDecisionsStyles, TaskDecisionSharedCssClassName } from './shared/task-decision';
 export { StatusSharedCssClassName } from './shared/status';
-export { smartCardSharedStyles, SmartCardSharedCssClassName } from './shared/smart-card';
+export { smartCardSharedStyles, SmartCardSharedCssClassName } from './shared/smart-card';
+export { CodeBlockSharedCssClassName, codeBlockSharedStyles } from './shared/code-block';

package/dist/es2019/styles/shared/block-marks.js

@@ -15,7 +15,8 @@ export const blockMarksSharedStyles = css`
     h5,
     h6,
     .heading-wrapper {
-      &:first-child {
+      :first-child:not(style),
+      style:first-child + * {
         margin-top: 0;
       }
     }

package/dist/es2019/styles/shared/code-block.js

@@ -0,0 +1,94 @@
+import { css } from '@emotion/react';
+import { akEditorCodeFontFamily, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+export const CodeBlockSharedCssClassName = {
+  CODEBLOCK_CONTAINER: 'code-block',
+  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
+  CODEBLOCK_CONTENT: 'code-content',
+  DS_CODEBLOCK: '[data-ds--code--code-block]'
+};
+export const codeBlockSharedStyles = props => css`
+  .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
+    position: relative;
+    background-color: ${themed({
+  light: token('color.background.neutral', N20),
+  dark: token('color.background.neutral', DN50)
+})(props)};
+    border-radius: ${borderRadius()}px;
+    counter-reset: line;
+    display: flex;
+    overflow-x: auto;
+
+    background-image: ${overflowShadow({
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  background: themed({
+    light: N20,
+    dark: DN50
+  })(props),
+  width: '8px'
+})};
+
+    --ds--code--bg-color: transparent;
+
+    background-repeat: no-repeat;
+    background-attachment: local, scroll, scroll;
+    background-size: 8px 100%, 8px 100%, 8px 100%;
+    background-position: 100% 0, 100% 0, 0 0;
+    font-family: ${akEditorCodeFontFamily};
+    margin: ${blockNodesVerticalMargin} 0 0 0;
+    min-width: ${akEditorTableCellMinWidth}px;
+    cursor: pointer;
+
+    .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
+      flex-shrink: 0;
+      text-align: right;
+      background-color: ${themed({
+  light: token('color.background.neutral', N30),
+  dark: token('color.background.neutral', DN20)
+})(props)};
+      padding: ${gridSize()}px;
+
+      span {
+        display: block;
+        line-height: 0;
+        font-size: 0;
+
+        ::before {
+          display: inline-block;
+          content: counter(line);
+          counter-increment: line;
+          color: ${themed({
+  light: token('color.text.subtlest', N400),
+  dark: token('color.text.subtlest', DN400)
+})(props)};
+          font-size: ${relativeFontSizeToBase16(fontSize())};
+          line-height: 1.5rem;
+        }
+      }
+    }
+
+    .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
+      display: flex;
+      flex: 1;
+
+      code {
+        flex-grow: 1;
+        tab-size: 4;
+        cursor: text;
+        color: ${themed({
+  light: token('color.text', N800),
+  dark: token('color.text', DN800)
+})(props)};
+        border-radius: ${borderRadius()}px;
+        margin: ${gridSize()}px;
+        white-space: pre;
+        font-size: ${relativeFontSizeToBase16(fontSize())};
+        line-height: 1.5rem;
+      }
+    }
+  }
+`;

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

@@ -1,7 +1,8 @@
-import { emojiImage, emojiNode, emojiSprite } from '@atlaskit/emoji';
+import { emojiImage, emojiNode, emojiPlaceholder, emojiSprite } from '@atlaskit/emoji';
 export const EmojiSharedCssClassName = {
   EMOJI_CONTAINER: 'emojiView-content-wrap',
   EMOJI_NODE: emojiNode,
   EMOJI_SPRITE: emojiSprite,
-  EMOJI_IMAGE: emojiImage
+  EMOJI_IMAGE: emojiImage,
+  EMOJI_PLACEHOLDER: emojiPlaceholder
 };

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

@@ -138,7 +138,8 @@ export const PanelSharedSelectors = {
   emojiPopup: `[aria-label="Popup"]`,
   searchEmoji: `[aria-label="Search emoji"]`,
   orangeWarningIcon: `[aria-label=":warning:"]`,
-  yellowWarningIcon: `[aria-label=":warning:"]  span:nth-child(1)`
+  yellowWarningIcon: `[aria-label=":warning:"]  span:nth-child(1)`,
+  copyButton: `button[aria-label="Copy"]`
 };
 
 const iconDynamicStyles = panelType => props => {

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

@@ -109,7 +109,8 @@ const tableSharedStyle = props => css`
   dark: getTableCellBackgroundDarkModeColors
 })(props)};
 
-        > *:first-child {
+        > :first-child:not(style),
+        > style:first-child + * {
           margin-top: 0;
         }