@atlaskit/editor-common 98.2.5 → 99.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-common
 
+## 99.0.0
+
+### Major Changes
+
+- [#97984](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97984)
+  [`8ffeab9aaf1ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ffeab9aaf1ab) -
+  [ux] [ED-23573] Added new actions (resolveMarks and registerMarks) to basePlugin. Callbacks added
+  to mentions, card, emoji and base plugins to handle conversion to inline code. Deprecated code
+  removed from editor-common.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 98.2.6
+
+### Patch Changes
+
+- [#100162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100162)
+  [`e80e57fc37719`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e80e57fc37719) -
+  [ux] ED-26089: Add 4px gap to main nav bar items
+
 ## 98.2.5
 
 ### Patch Changes

package/dist/cjs/mark/commands.js

@@ -7,7 +7,6 @@ exports.entireSelectionContainsMark = exports.applyMarkOnRange = void 0;
 exports.filterChildrenBetween = filterChildrenBetween;
 exports.toggleMark = exports.removeMark = void 0;
 exports.transformNonTextNodesToText = transformNonTextNodesToText;
-exports.transformSmartCharsMentionsAndEmojis = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -27,44 +26,6 @@ var SMART_TO_ASCII = {
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 var FIND_SMART_CHAR = new RegExp("[".concat(Object.keys(SMART_TO_ASCII).join(''), "]"), 'g');
-var isNodeTextBlock = function isNodeTextBlock(schema) {
-  var _schema$nodes = schema.nodes,
-    mention = _schema$nodes.mention,
-    text = _schema$nodes.text,
-    emoji = _schema$nodes.emoji;
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function (node, _, parent) {
-    if (node.type === mention || node.type === emoji || node.type === text) {
-      return parent === null || parent === void 0 ? void 0 : parent.isTextblock;
-    }
-    return;
-  };
-};
-var replaceSmartCharsToAscii = function replaceSmartCharsToAscii(position, textContent, tr) {
-  var schema = tr.doc.type.schema;
-  var match;
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line no-cond-assign
-  while (match = FIND_SMART_CHAR.exec(textContent)) {
-    var _match = match,
-      smartChar = _match[0],
-      offset = _match.index;
-    var replacePos = tr.mapping.map(position + offset);
-    var replacementText = schema.text(SMART_TO_ASCII[smartChar]);
-    tr.replaceWith(replacePos, replacePos + smartChar.length, replacementText);
-  }
-};
-var replaceMentionOrEmojiForTextContent = function replaceMentionOrEmojiForTextContent(position, nodeSize, textContent, tr
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
-  var currentPos = tr.mapping.map(position);
-  var schema = tr.doc.type.schema;
-  tr.replaceWith(currentPos, currentPos + nodeSize, schema.text(textContent));
-};
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
@@ -83,11 +44,11 @@ function filterChildrenBetween(doc, from, to, predicate) {
 function transformNonTextNodesToText(from, to, tr) {
   var doc = tr.doc;
   var schema = doc.type.schema;
-  var _schema$nodes2 = schema.nodes,
-    mentionNodeType = _schema$nodes2.mention,
-    textNodeType = _schema$nodes2.text,
-    emojiNodeType = _schema$nodes2.emoji,
-    inlineCardNodeType = _schema$nodes2.inlineCard;
+  var _schema$nodes = schema.nodes,
+    mentionNodeType = _schema$nodes.mention,
+    textNodeType = _schema$nodes.text,
+    emojiNodeType = _schema$nodes.emoji,
+    inlineCardNodeType = _schema$nodes.inlineCard;
   var nodesToChange = [];
   doc.nodesBetween(from, to, function (node, pos, parent) {
     if ([mentionNodeType, textNodeType, emojiNodeType, inlineCardNodeType].includes(node.type)) {
@@ -122,36 +83,6 @@ function transformNonTextNodesToText(from, to, tr) {
     }
   });
 }
-
-/**
- * @private
- * @deprecated Use {@link transformNonTextNodesToText} instead.
- */
-var transformSmartCharsMentionsAndEmojis = exports.transformSmartCharsMentionsAndEmojis = function transformSmartCharsMentionsAndEmojis(from, to, tr) {
-  var schema = tr.doc.type.schema;
-  var _schema$nodes3 = schema.nodes,
-    mention = _schema$nodes3.mention,
-    text = _schema$nodes3.text,
-    emoji = _schema$nodes3.emoji;
-  // Traverse through all the nodes within the range and replace them with their plaintext counterpart
-  var children = filterChildrenBetween(tr.doc, from, to, isNodeTextBlock(schema));
-  children.forEach(function (_ref2) {
-    var node = _ref2.node,
-      pos = _ref2.pos;
-    if (node.type === mention || node.type === emoji) {
-      // Convert gracefully when no text found, ProseMirror will blow up if you try to create a node with an empty string or undefined
-      var replacementText = node.attrs.text;
-      if (typeof replacementText === 'undefined' || replacementText === '') {
-        replacementText = "".concat(node.type.name, " text missing");
-      }
-      replaceMentionOrEmojiForTextContent(pos, node.nodeSize, replacementText, tr);
-    } else if (node.type === text && node.text) {
-      var replacePosition = pos > from ? pos : from;
-      var textToReplace = pos > from ? node.text : node.text.substr(from - pos);
-      replaceSmartCharsToAscii(replacePosition, textToReplace, tr);
-    }
-  });
-};
 var applyMarkOnRange = exports.applyMarkOnRange = function applyMarkOnRange(from, to, removeMark, mark, tr
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
@@ -207,8 +138,8 @@ var entireSelectionContainsMark = exports.entireSelectionContainsMark = function
   return onlyContainsMark;
 };
 var toggleMarkInRange = function toggleMarkInRange(mark) {
-  return function (_ref3) {
-    var tr = _ref3.tr;
+  return function (_ref2) {
+    var tr = _ref2.tr;
     if (tr.selection instanceof _cellSelection.CellSelection) {
       var _removeMark = true;
       var cells = [];
@@ -253,8 +184,8 @@ var toggleMarkInRange = function toggleMarkInRange(mark) {
  * @param attrs
  */
 var toggleMark = exports.toggleMark = function toggleMark(markType, attrs) {
-  return function (_ref4) {
-    var tr = _ref4.tr;
+  return function (_ref3) {
+    var tr = _ref3.tr;
     var mark = markType.create(attrs);
 
     // For cursor selections we can use the default behaviour.
@@ -276,8 +207,8 @@ var toggleMark = exports.toggleMark = function toggleMark(markType, attrs) {
  * A wrapper around ProseMirror removeMark and removeStoredMark, which handles mark removal in text, CellSelections and cursor stored marks.
  */
 var removeMark = exports.removeMark = function removeMark(mark) {
-  return function (_ref5) {
-    var tr = _ref5.tr;
+  return function (_ref4) {
+    var tr = _ref4.tr;
     var selection = tr.selection;
     if (selection instanceof _cellSelection.CellSelection) {
       selection.forEachCell(function (cell, cellPos) {

package/dist/cjs/mark/index.js

@@ -57,11 +57,5 @@ Object.defineProperty(exports, "transformNonTextNodesToText", {
     return _commands.transformNonTextNodesToText;
   }
 });
-Object.defineProperty(exports, "transformSmartCharsMentionsAndEmojis", {
-  enumerable: true,
-  get: function get() {
-    return _commands.transformSmartCharsMentionsAndEmojis;
-  }
-});
 var _commands = require("./commands");
 var _textFormatting = require("./text-formatting");

package/dist/cjs/messages/mentions.js

@@ -25,5 +25,10 @@ var mentionMessages = exports.mentionMessages = (0, _reactIntlNext.defineMessage
     id: 'fabric.editor.mentionNode.label',
     defaultMessage: 'Tagged user',
     description: 'Label to indicate mention node to Screen reader users, that preceeds with user name ex: "Tagged user @XXX'
+  },
+  unknownLabel: {
+    id: 'fabric.editor.unknown.label',
+    defaultMessage: 'Unknown',
+    description: 'Label to indicate unknown mention node'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "98.2.5";
+var packageVersion = "99.0.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/index.js

@@ -159,6 +159,12 @@ Object.defineProperty(exports, "buttonGroupStyle", {
     return _plugins.buttonGroupStyle;
   }
 });
+Object.defineProperty(exports, "buttonGroupStyleBeforeVisualRefresh", {
+  enumerable: true,
+  get: function get() {
+    return _plugins.buttonGroupStyleBeforeVisualRefresh;
+  }
+});
 Object.defineProperty(exports, "calcTableWidth", {
   enumerable: true,
   get: function get() {

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

@@ -3,11 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.triggerWrapperStylesWithPadding = exports.triggerWrapperStyles = exports.separatorStyles = exports.disableBlueBorderStyles = exports.buttonGroupStyle = void 0;
+exports.wrapperStyle = exports.triggerWrapperStylesWithPadding = exports.triggerWrapperStyles = exports.separatorStyles = exports.disableBlueBorderStyles = exports.buttonGroupStyleBeforeVisualRefresh = exports.buttonGroupStyle = void 0;
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, -- Ignored via go/DSP-18766
+var buttonGroupStyleBeforeVisualRefresh = exports.buttonGroupStyleBeforeVisualRefresh = (0, _react.css)({
+  display: 'inline-flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'button:not(#local-media-upload-button)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not([disabled])::after': {
+      border: 'none' // remove blue border when an item has been selected
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var buttonGroupStyle = exports.buttonGroupStyle = (0, _react.css)({
   display: 'inline-flex',
   alignItems: 'center',
@@ -15,12 +32,17 @@ var buttonGroupStyle = exports.buttonGroupStyle = (0, _react.css)({
   '& > div': {
     display: 'flex'
   },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  button: {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'button:not(#local-media-upload-button)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:not([disabled])::after': {
       border: 'none' // remove blue border when an item has been selected
     }
+  },
+  gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[role=group]': {
+    gap: "var(--ds-space-050, 4px)"
   }
 });
 

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "98.2.5";
+var packageVersion = "99.0.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/ui-menu/ColorPickerButton/index.js

@@ -10,9 +10,11 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
@@ -38,6 +40,21 @@ var colorPickerExpandContainer = (0, _primitives.xcss)({
   marginLeft: 'space.negative.050',
   marginRight: 'space.negative.050'
 });
+var colorPickerExpandContainerVisualRefresh = (0, _primitives.xcss)({
+  marginTop: 'space.negative.025',
+  marginRight: 'space.negative.050'
+});
+var colorPickerButtonStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    '&::after': {
+      border: 'none'
+    },
+    '&:hover': {
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+    }
+  }
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -212,12 +229,69 @@ var ColorPickerButton = function ColorPickerButton(props) {
       }
     });
   };
+  var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
+    var _props$size4, _props$size5, _props$size6;
+    return (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: "".concat(!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        border: "1px solid ".concat(_uiColor.DEFAULT_BORDER_COLOR),
+        borderRadius: "var(--ds-border-radius, 3px)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        backgroundColor: currentColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
+        marginTop: "var(--ds-space-025, 2px)"
+      }
+    });
+  };
   return (0, _react2.jsx)("div", {
     css: colorPickerButtonWrapper
   }, (0, _react2.jsx)(_tooltip.default, {
     content: title,
     position: "top"
-  }, (0, _react2.jsx)(_standardButton.default, {
+  },
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.jsx)("div", {
+    css: colorPickerButtonStyle
+  }, (0, _react2.jsx)(_new.default, {
+    appearance: 'subtle',
+    ref: buttonRef,
+    "aria-label": title,
+    "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
+    spacing: "compact",
+    onClick: togglePopup,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "data-selected-color": props.currentColor,
+    isSelected: isPopupOpen
+  }, (0, _react2.jsx)(_primitives.Inline, {
+    alignBlock: "start"
+  }, (0, _react2.jsx)("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: buttonStyleVisualRefresh
+  }), (0, _react2.jsx)(_primitives.Box, {
+    xcss: colorPickerExpandContainerVisualRefresh
+  }, (0, _react2.jsx)(_chevronDown2.default, {
+    color: "currentColor",
+    spacing: "spacious",
+    LEGACY_fallbackIcon: _chevronDown.default,
+    label: "color-picker-chevron-down"
+  }))))) : (0, _react2.jsx)(_standardButton.default, {
     appearance: 'subtle',
     ref: buttonRef,
     "aria-label": title,
@@ -231,7 +305,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
         setIsOpenedByKeyboard(true);
       }
     }
-    // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     css: buttonStyle,

package/dist/es2019/mark/commands.js

@@ -17,50 +17,6 @@ const SMART_TO_ASCII = {
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 const FIND_SMART_CHAR = new RegExp(`[${Object.keys(SMART_TO_ASCII).join('')}]`, 'g');
-const isNodeTextBlock = schema => {
-  const {
-    mention,
-    text,
-    emoji
-  } = schema.nodes;
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (node, _, parent) => {
-    if (node.type === mention || node.type === emoji || node.type === text) {
-      return parent === null || parent === void 0 ? void 0 : parent.isTextblock;
-    }
-    return;
-  };
-};
-const replaceSmartCharsToAscii = (position, textContent, tr) => {
-  const {
-    schema
-  } = tr.doc.type;
-  let match;
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line no-cond-assign
-  while (match = FIND_SMART_CHAR.exec(textContent)) {
-    const {
-      0: smartChar,
-      index: offset
-    } = match;
-    const replacePos = tr.mapping.map(position + offset);
-    const replacementText = schema.text(SMART_TO_ASCII[smartChar]);
-    tr.replaceWith(replacePos, replacePos + smartChar.length, replacementText);
-  }
-};
-const replaceMentionOrEmojiForTextContent = (position, nodeSize, textContent, tr
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
-  const currentPos = tr.mapping.map(position);
-  const {
-    schema
-  } = tr.doc.type;
-  tr.replaceWith(currentPos, currentPos + nodeSize, schema.text(textContent));
-};
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
@@ -124,40 +80,6 @@ export function transformNonTextNodesToText(from, to, tr) {
     }
   });
 }
-
-/**
- * @private
- * @deprecated Use {@link transformNonTextNodesToText} instead.
- */
-export const transformSmartCharsMentionsAndEmojis = (from, to, tr) => {
-  const {
-    schema
-  } = tr.doc.type;
-  const {
-    mention,
-    text,
-    emoji
-  } = schema.nodes;
-  // Traverse through all the nodes within the range and replace them with their plaintext counterpart
-  const children = filterChildrenBetween(tr.doc, from, to, isNodeTextBlock(schema));
-  children.forEach(({
-    node,
-    pos
-  }) => {
-    if (node.type === mention || node.type === emoji) {
-      // Convert gracefully when no text found, ProseMirror will blow up if you try to create a node with an empty string or undefined
-      let replacementText = node.attrs.text;
-      if (typeof replacementText === 'undefined' || replacementText === '') {
-        replacementText = `${node.type.name} text missing`;
-      }
-      replaceMentionOrEmojiForTextContent(pos, node.nodeSize, replacementText, tr);
-    } else if (node.type === text && node.text) {
-      const replacePosition = pos > from ? pos : from;
-      const textToReplace = pos > from ? node.text : node.text.substr(from - pos);
-      replaceSmartCharsToAscii(replacePosition, textToReplace, tr);
-    }
-  });
-};
 export const applyMarkOnRange = (from, to, removeMark, mark, tr
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params

package/dist/es2019/mark/index.js

@@ -1,5 +1,5 @@
 // Disable no-re-export rule for entry point files
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-export { transformSmartCharsMentionsAndEmojis, transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark } from './commands';
+export { transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark } from './commands';
 export { anyMarkActive, isMarkAllowedInRange, isMarkExcluded } from './text-formatting';

package/dist/es2019/messages/mentions.js

@@ -19,5 +19,10 @@ export const mentionMessages = defineMessages({
     id: 'fabric.editor.mentionNode.label',
     defaultMessage: 'Tagged user',
     description: 'Label to indicate mention node to Screen reader users, that preceeds with user name ex: "Tagged user @XXX'
+  },
+  unknownLabel: {
+    id: 'fabric.editor.unknown.label',
+    defaultMessage: 'Unknown',
+    description: 'Label to indicate unknown mention node'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "98.2.5";
+const packageVersion = "99.0.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/index.js

@@ -30,7 +30,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

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

@@ -1,6 +1,23 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, -- Ignored via go/DSP-18766
+export const buttonGroupStyleBeforeVisualRefresh = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'button:not(#local-media-upload-button)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not([disabled])::after': {
+      border: 'none' // remove blue border when an item has been selected
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const buttonGroupStyle = css({
   display: 'inline-flex',
   alignItems: 'center',
@@ -8,12 +25,17 @@ export const buttonGroupStyle = css({
   '& > div': {
     display: 'flex'
   },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  button: {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'button:not(#local-media-upload-button)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:not([disabled])::after': {
       border: 'none' // remove blue border when an item has been selected
     }
+  },
+  gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[role=group]': {
+    gap: "var(--ds-space-050, 4px)"
   }
 });
 

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "98.2.5";
+const packageVersion = "99.0.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/ui-menu/ColorPickerButton/index.js

@@ -8,10 +8,12 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss, Inline } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -30,6 +32,21 @@ const colorPickerExpandContainer = xcss({
   marginLeft: 'space.negative.050',
   marginRight: 'space.negative.050'
 });
+const colorPickerExpandContainerVisualRefresh = xcss({
+  marginTop: 'space.negative.025',
+  marginRight: 'space.negative.050'
+});
+const colorPickerButtonStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    '&::after': {
+      border: 'none'
+    },
+    '&:hover': {
+      backgroundColor: `${"var(--ds-background-selected, #E9F2FF)"}`
+    }
+  }
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -192,12 +209,69 @@ const ColorPickerButton = props => {
       }
     });
   };
+  const buttonStyleVisualRefresh = () => {
+    var _props$size4, _props$size5, _props$size6;
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: `${!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''}`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        border: `1px solid ${DEFAULT_BORDER_COLOR}`,
+        borderRadius: "var(--ds-border-radius, 3px)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        backgroundColor: currentColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
+        marginTop: `${"var(--ds-space-025, 2px)"}`
+      }
+    });
+  };
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {
     content: title,
     position: "top"
+  },
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('platform-visual-refresh-icons') ? jsx("div", {
+    css: colorPickerButtonStyle
   }, jsx(Button, {
+    appearance: 'subtle',
+    ref: buttonRef,
+    "aria-label": title,
+    "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
+    spacing: "compact",
+    onClick: togglePopup,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "data-selected-color": props.currentColor,
+    isSelected: isPopupOpen
+  }, jsx(Inline, {
+    alignBlock: "start"
+  }, jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: buttonStyleVisualRefresh
+  }), jsx(Box, {
+    xcss: colorPickerExpandContainerVisualRefresh
+  }, jsx(ChevronDownIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    LEGACY_fallbackIcon: LegacyExpandIcon,
+    label: "color-picker-chevron-down"
+  }))))) : jsx(LegacyButton, {
     appearance: 'subtle',
     ref: buttonRef,
     "aria-label": title,
@@ -211,7 +285,6 @@ const ColorPickerButton = props => {
         setIsOpenedByKeyboard(true);
       }
     }
-    // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     css: buttonStyle,

package/dist/esm/mark/commands.js

@@ -17,44 +17,6 @@ var SMART_TO_ASCII = {
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 var FIND_SMART_CHAR = new RegExp("[".concat(Object.keys(SMART_TO_ASCII).join(''), "]"), 'g');
-var isNodeTextBlock = function isNodeTextBlock(schema) {
-  var _schema$nodes = schema.nodes,
-    mention = _schema$nodes.mention,
-    text = _schema$nodes.text,
-    emoji = _schema$nodes.emoji;
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function (node, _, parent) {
-    if (node.type === mention || node.type === emoji || node.type === text) {
-      return parent === null || parent === void 0 ? void 0 : parent.isTextblock;
-    }
-    return;
-  };
-};
-var replaceSmartCharsToAscii = function replaceSmartCharsToAscii(position, textContent, tr) {
-  var schema = tr.doc.type.schema;
-  var match;
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line no-cond-assign
-  while (match = FIND_SMART_CHAR.exec(textContent)) {
-    var _match = match,
-      smartChar = _match[0],
-      offset = _match.index;
-    var replacePos = tr.mapping.map(position + offset);
-    var replacementText = schema.text(SMART_TO_ASCII[smartChar]);
-    tr.replaceWith(replacePos, replacePos + smartChar.length, replacementText);
-  }
-};
-var replaceMentionOrEmojiForTextContent = function replaceMentionOrEmojiForTextContent(position, nodeSize, textContent, tr
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
-  var currentPos = tr.mapping.map(position);
-  var schema = tr.doc.type.schema;
-  tr.replaceWith(currentPos, currentPos + nodeSize, schema.text(textContent));
-};
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
@@ -73,11 +35,11 @@ export function filterChildrenBetween(doc, from, to, predicate) {
 export function transformNonTextNodesToText(from, to, tr) {
   var doc = tr.doc;
   var schema = doc.type.schema;
-  var _schema$nodes2 = schema.nodes,
-    mentionNodeType = _schema$nodes2.mention,
-    textNodeType = _schema$nodes2.text,
-    emojiNodeType = _schema$nodes2.emoji,
-    inlineCardNodeType = _schema$nodes2.inlineCard;
+  var _schema$nodes = schema.nodes,
+    mentionNodeType = _schema$nodes.mention,
+    textNodeType = _schema$nodes.text,
+    emojiNodeType = _schema$nodes.emoji,
+    inlineCardNodeType = _schema$nodes.inlineCard;
   var nodesToChange = [];
   doc.nodesBetween(from, to, function (node, pos, parent) {
     if ([mentionNodeType, textNodeType, emojiNodeType, inlineCardNodeType].includes(node.type)) {
@@ -112,36 +74,6 @@ export function transformNonTextNodesToText(from, to, tr) {
     }
   });
 }
-
-/**
- * @private
- * @deprecated Use {@link transformNonTextNodesToText} instead.
- */
-export var transformSmartCharsMentionsAndEmojis = function transformSmartCharsMentionsAndEmojis(from, to, tr) {
-  var schema = tr.doc.type.schema;
-  var _schema$nodes3 = schema.nodes,
-    mention = _schema$nodes3.mention,
-    text = _schema$nodes3.text,
-    emoji = _schema$nodes3.emoji;
-  // Traverse through all the nodes within the range and replace them with their plaintext counterpart
-  var children = filterChildrenBetween(tr.doc, from, to, isNodeTextBlock(schema));
-  children.forEach(function (_ref2) {
-    var node = _ref2.node,
-      pos = _ref2.pos;
-    if (node.type === mention || node.type === emoji) {
-      // Convert gracefully when no text found, ProseMirror will blow up if you try to create a node with an empty string or undefined
-      var replacementText = node.attrs.text;
-      if (typeof replacementText === 'undefined' || replacementText === '') {
-        replacementText = "".concat(node.type.name, " text missing");
-      }
-      replaceMentionOrEmojiForTextContent(pos, node.nodeSize, replacementText, tr);
-    } else if (node.type === text && node.text) {
-      var replacePosition = pos > from ? pos : from;
-      var textToReplace = pos > from ? node.text : node.text.substr(from - pos);
-      replaceSmartCharsToAscii(replacePosition, textToReplace, tr);
-    }
-  });
-};
 export var applyMarkOnRange = function applyMarkOnRange(from, to, removeMark, mark, tr
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
@@ -197,8 +129,8 @@ export var entireSelectionContainsMark = function entireSelectionContainsMark(ma
   return onlyContainsMark;
 };
 var toggleMarkInRange = function toggleMarkInRange(mark) {
-  return function (_ref3) {
-    var tr = _ref3.tr;
+  return function (_ref2) {
+    var tr = _ref2.tr;
     if (tr.selection instanceof CellSelection) {
       var _removeMark = true;
       var cells = [];
@@ -243,8 +175,8 @@ var toggleMarkInRange = function toggleMarkInRange(mark) {
  * @param attrs
  */
 export var toggleMark = function toggleMark(markType, attrs) {
-  return function (_ref4) {
-    var tr = _ref4.tr;
+  return function (_ref3) {
+    var tr = _ref3.tr;
     var mark = markType.create(attrs);
 
     // For cursor selections we can use the default behaviour.
@@ -266,8 +198,8 @@ export var toggleMark = function toggleMark(markType, attrs) {
  * A wrapper around ProseMirror removeMark and removeStoredMark, which handles mark removal in text, CellSelections and cursor stored marks.
  */
 export var removeMark = function removeMark(mark) {
-  return function (_ref5) {
-    var tr = _ref5.tr;
+  return function (_ref4) {
+    var tr = _ref4.tr;
     var selection = tr.selection;
     if (selection instanceof CellSelection) {
       selection.forEachCell(function (cell, cellPos) {

package/dist/esm/mark/index.js

@@ -1,5 +1,5 @@
 // Disable no-re-export rule for entry point files
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-export { transformSmartCharsMentionsAndEmojis, transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark } from './commands';
+export { transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark } from './commands';
 export { anyMarkActive, isMarkAllowedInRange, isMarkExcluded } from './text-formatting';

package/dist/esm/messages/mentions.js

@@ -19,5 +19,10 @@ export var mentionMessages = defineMessages({
     id: 'fabric.editor.mentionNode.label',
     defaultMessage: 'Tagged user',
     description: 'Label to indicate mention node to Screen reader users, that preceeds with user name ex: "Tagged user @XXX'
+  },
+  unknownLabel: {
+    id: 'fabric.editor.unknown.label',
+    defaultMessage: 'Unknown',
+    description: 'Label to indicate unknown mention node'
   }
 });

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "98.2.5";
+var packageVersion = "99.0.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/styles/index.js

@@ -30,7 +30,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

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

@@ -1,6 +1,23 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, -- Ignored via go/DSP-18766
+export var buttonGroupStyleBeforeVisualRefresh = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'button:not(#local-media-upload-button)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not([disabled])::after': {
+      border: 'none' // remove blue border when an item has been selected
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var buttonGroupStyle = css({
   display: 'inline-flex',
   alignItems: 'center',
@@ -8,12 +25,17 @@ export var buttonGroupStyle = css({
   '& > div': {
     display: 'flex'
   },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  button: {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'button:not(#local-media-upload-button)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:not([disabled])::after': {
       border: 'none' // remove blue border when an item has been selected
     }
+  },
+  gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[role=group]': {
+    gap: "var(--ds-space-050, 4px)"
   }
 });
 

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "98.2.5";
+var packageVersion = "99.0.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -9,10 +9,12 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss, Inline } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -31,6 +33,21 @@ var colorPickerExpandContainer = xcss({
   marginLeft: 'space.negative.050',
   marginRight: 'space.negative.050'
 });
+var colorPickerExpandContainerVisualRefresh = xcss({
+  marginTop: 'space.negative.025',
+  marginRight: 'space.negative.050'
+});
+var colorPickerButtonStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    '&::after': {
+      border: 'none'
+    },
+    '&:hover': {
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+    }
+  }
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -205,12 +222,69 @@ var ColorPickerButton = function ColorPickerButton(props) {
       }
     });
   };
+  var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
+    var _props$size4, _props$size5, _props$size6;
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: "".concat(!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        border: "1px solid ".concat(DEFAULT_BORDER_COLOR),
+        borderRadius: "var(--ds-border-radius, 3px)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        backgroundColor: currentColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
+        marginTop: "var(--ds-space-025, 2px)"
+      }
+    });
+  };
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {
     content: title,
     position: "top"
+  },
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('platform-visual-refresh-icons') ? jsx("div", {
+    css: colorPickerButtonStyle
   }, jsx(Button, {
+    appearance: 'subtle',
+    ref: buttonRef,
+    "aria-label": title,
+    "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
+    spacing: "compact",
+    onClick: togglePopup,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "data-selected-color": props.currentColor,
+    isSelected: isPopupOpen
+  }, jsx(Inline, {
+    alignBlock: "start"
+  }, jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: buttonStyleVisualRefresh
+  }), jsx(Box, {
+    xcss: colorPickerExpandContainerVisualRefresh
+  }, jsx(ChevronDownIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    LEGACY_fallbackIcon: LegacyExpandIcon,
+    label: "color-picker-chevron-down"
+  }))))) : jsx(LegacyButton, {
     appearance: 'subtle',
     ref: buttonRef,
     "aria-label": title,
@@ -224,7 +298,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
         setIsOpenedByKeyboard(true);
       }
     }
-    // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     css: buttonStyle,

package/dist/types/mark/commands.d.ts

@@ -6,11 +6,6 @@ export declare function filterChildrenBetween(doc: PMNode, from: number, to: num
     pos: number;
 }[];
 export declare function transformNonTextNodesToText(from: number, to: number, tr: Transaction): void;
-/**
- * @private
- * @deprecated Use {@link transformNonTextNodesToText} instead.
- */
-export declare const transformSmartCharsMentionsAndEmojis: (from: number, to: number, tr: Transaction) => void;
 export declare const applyMarkOnRange: (from: number, to: number, removeMark: boolean, mark: Mark, tr: Transaction) => Transaction;
 export declare const entireSelectionContainsMark: (mark: Mark | MarkType, doc: PMNode, fromPos: number, toPos: number) => boolean;
 /**

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

@@ -1,2 +1,2 @@
-export { transformSmartCharsMentionsAndEmojis, transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark, } from './commands';
+export { transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark, } from './commands';
 export { anyMarkActive, isMarkAllowedInRange, isMarkExcluded } from './text-formatting';

package/dist/types/messages/mentions.d.ts

@@ -19,4 +19,9 @@ export declare const mentionMessages: {
         defaultMessage: string;
         description: string;
     };
+    unknownLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -27,7 +27,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle, } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

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

@@ -1,3 +1,4 @@
+export declare const buttonGroupStyleBeforeVisualRefresh: import("@emotion/react").SerializedStyles;
 export declare const buttonGroupStyle: import("@emotion/react").SerializedStyles;
 export declare const separatorStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/mark/commands.d.ts

@@ -6,11 +6,6 @@ export declare function filterChildrenBetween(doc: PMNode, from: number, to: num
     pos: number;
 }[];
 export declare function transformNonTextNodesToText(from: number, to: number, tr: Transaction): void;
-/**
- * @private
- * @deprecated Use {@link transformNonTextNodesToText} instead.
- */
-export declare const transformSmartCharsMentionsAndEmojis: (from: number, to: number, tr: Transaction) => void;
 export declare const applyMarkOnRange: (from: number, to: number, removeMark: boolean, mark: Mark, tr: Transaction) => Transaction;
 export declare const entireSelectionContainsMark: (mark: Mark | MarkType, doc: PMNode, fromPos: number, toPos: number) => boolean;
 /**

package/dist/types-ts4.5/mark/index.d.ts

@@ -1,2 +1,2 @@
-export { transformSmartCharsMentionsAndEmojis, transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark, } from './commands';
+export { transformNonTextNodesToText, applyMarkOnRange, filterChildrenBetween, toggleMark, removeMark, entireSelectionContainsMark, } from './commands';
 export { anyMarkActive, isMarkAllowedInRange, isMarkExcluded } from './text-formatting';

package/dist/types-ts4.5/messages/mentions.d.ts

@@ -19,4 +19,9 @@ export declare const mentionMessages: {
         defaultMessage: string;
         description: string;
     };
+    unknownLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/styles/index.d.ts

@@ -27,7 +27,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle, } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

package/dist/types-ts4.5/styles/shared/plugins.d.ts

@@ -1,3 +1,4 @@
+export declare const buttonGroupStyleBeforeVisualRefresh: import("@emotion/react").SerializedStyles;
 export declare const buttonGroupStyle: import("@emotion/react").SerializedStyles;
 export declare const separatorStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "98.2.5",
+	"version": "99.0.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -113,7 +113,7 @@
 	"dependencies": {
 		"@atlaskit/activity-provider": "^2.5.0",
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/adf-utils": "^19.15.0",
+		"@atlaskit/adf-utils": "^19.16.0",
 		"@atlaskit/analytics-listeners": "^8.13.0",
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.2.0",
@@ -124,12 +124,12 @@
 		"@atlaskit/custom-steps": "^0.9.0",
 		"@atlaskit/dropdown-menu": "^12.24.0",
 		"@atlaskit/editor-json-transformer": "^8.21.0",
-		"@atlaskit/editor-palette": "1.6.3",
+		"@atlaskit/editor-palette": "1.6.4",
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/emoji": "^67.12.0",
-		"@atlaskit/icon": "^23.2.0",
+		"@atlaskit/icon": "^23.3.0",
 		"@atlaskit/icon-object": "^6.9.0",
 		"@atlaskit/link-datasource": "^3.15.0",
 		"@atlaskit/link-picker": "^1.47.0",
@@ -140,7 +140,7 @@
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^67.0.0",
 		"@atlaskit/media-ui": "^27.3.0",
-		"@atlaskit/media-viewer": "49.6.0",
+		"@atlaskit/media-viewer": "49.6.1",
 		"@atlaskit/mention": "^23.7.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/onboarding": "^12.2.0",
@@ -155,7 +155,7 @@
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/textfield": "^6.7.0",
 		"@atlaskit/tmp-editor-statsig": "^2.33.0",
-		"@atlaskit/tokens": "^2.5.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/width-detector": "^4.3.0",
 		"@babel/runtime": "^7.0.0",