@atlaskit/editor-plugin-text-formatting 1.16.8 → 1.16.10

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 1.16.10
+
+### Patch 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.
+- Updated dependencies
+
+## 1.16.9
+
+### 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
+
 ## 1.16.8
 
 ### Patch Changes

package/dist/cjs/editor-commands/utils/marks.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nextToggleMark = exports.nextApplyMarkOnRange = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * A custom version of the ProseMirror toggleMark, where we only toggle marks
+ * on text nodes in the selection rather than all inline nodes.
+ * @param markType
+ * @param attrs
+ */
+var nextToggleMark = exports.nextToggleMark = function nextToggleMark(markType, api, attrs) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var mark = markType.create(attrs);
+
+    // For cursor selections we can use the default behaviour.
+    if (tr.selection instanceof _state.TextSelection && tr.selection.$cursor) {
+      if (mark.isInSet(tr.storedMarks || tr.selection.$cursor.marks())) {
+        tr.removeStoredMark(mark);
+      } else {
+        tr.addStoredMark(mark);
+      }
+      return tr;
+    }
+    return nextToggleMarkInRange(mark, api)({
+      tr: tr
+    });
+  };
+};
+var nextToggleMarkInRange = function nextToggleMarkInRange(mark, api) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    if (tr.selection instanceof _cellSelection.CellSelection) {
+      var removeMark = true;
+      var cells = [];
+      tr.selection.forEachCell(function (cell, cellPos) {
+        cells.push({
+          node: cell,
+          pos: cellPos
+        });
+        var from = cellPos;
+        var to = cellPos + cell.nodeSize;
+        removeMark && (removeMark = (0, _mark.entireSelectionContainsMark)(mark, tr.doc, from, to));
+      });
+      for (var i = cells.length - 1; i >= 0; i--) {
+        var cell = cells[i];
+        var from = cell.pos;
+        var to = from + cell.node.nodeSize;
+        nextApplyMarkOnRange(from, to, removeMark, mark, tr, api);
+      }
+    } else {
+      var _tr$selection = tr.selection,
+        $from = _tr$selection.$from,
+        $to = _tr$selection.$to;
+      // We decide to remove the mark only if the entire selection contains the mark
+      // Examples with *bold* text
+      // Scenario 1: Selection contains both bold and non-bold text -> bold entire selection
+      // Scenario 2: Selection contains only bold text -> un-bold entire selection
+      // Scenario 3: Selection contains no bold text -> bold entire selection
+      var _removeMark = (0, _mark.entireSelectionContainsMark)(mark, tr.doc, $from.pos, $to.pos);
+      nextApplyMarkOnRange($from.pos, $to.pos, _removeMark, mark, tr, api);
+    }
+    if (tr.docChanged) {
+      return tr;
+    }
+    return null;
+  };
+};
+var nextApplyMarkOnRange = exports.nextApplyMarkOnRange = function nextApplyMarkOnRange(from, to, removeMark, mark, tr, api
+// eslint-disable-next-line @typescript-eslint/max-params
+) {
+  var schema = tr.doc.type.schema;
+  var code = schema.marks.code;
+  if (mark.type === code) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_resolve_marks')) {
+      var _api$base;
+      api === null || api === void 0 || (_api$base = api.base) === null || _api$base === void 0 || _api$base.actions.resolveMarks(from, to, tr);
+    } else {
+      (0, _mark.transformNonTextNodesToText)(from, to, tr);
+    }
+  }
+
+  /**
+   * We should refactor this so text formatting doesn't reference plugins it doesn't know about.
+   */
+  tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), function (node, pos) {
+    if ((0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
+      if (!node.isText) {
+        var isAllowedInlineNode = ['emoji', 'status', 'date', 'mention', 'inlineCard'].includes(node.type.name);
+        if (!isAllowedInlineNode) {
+          return true;
+        }
+      }
+    } else {
+      if (!node.isText) {
+        return true;
+      }
+    }
+
+    // This is an issue when the user selects some text.
+    // We need to check if the current node position is less than the range selection from.
+    // If it’s true, that means we should apply the mark using the range selection,
+    // not the current node position.
+    var nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
+    var nodeBetweenTo = Math.min(pos + node.nodeSize, tr.mapping.map(to));
+    if (removeMark) {
+      tr.removeMark(nodeBetweenFrom, nodeBetweenTo, mark);
+    } else {
+      tr.addMark(nodeBetweenFrom, nodeBetweenTo, mark);
+    }
+    return true;
+  });
+  return tr;
+};

package/dist/cjs/pm-plugins/commands.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.toggleUnderlineWithAnalytics = exports.toggleUnderline = exports.toggleSuperscriptWithAnalytics = exports.toggleSuperscript = exports.toggleSubscriptWithAnalytics = exports.toggleSubscript = exports.toggleStrongWithAnalytics = exports.toggleStrong = exports.toggleStrikeWithAnalytics = exports.toggleStrike = exports.toggleEmWithAnalytics = exports.toggleEm = exports.toggleCodeWithAnalytics = exports.toggleCode = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _mark = require("@atlaskit/editor-common/mark");
+var _marks = require("../editor-commands/utils/marks");
 var toggleEm = exports.toggleEm = function toggleEm(_ref) {
   var tr = _ref.tr;
   var em = tr.doc.type.schema.marks.em;
@@ -221,21 +222,26 @@ var toggleSubscriptWithAnalytics = exports.toggleSubscriptWithAnalytics = functi
   };
 };
 var toggleCode = exports.toggleCode = function toggleCode(_ref13) {
-  var tr = _ref13.tr;
-  var code = tr.doc.type.schema.marks.code;
-  if (!code) {
-    // No transaction to apply
-    return null;
-  }
-  return (0, _mark.toggleMark)(code)({
-    tr: tr
-  });
+  var api = _ref13.api;
+  return function (_ref14) {
+    var tr = _ref14.tr;
+    var code = tr.doc.type.schema.marks.code;
+    if (!code) {
+      // No transaction to apply
+      return null;
+    }
+    return (0, _marks.nextToggleMark)(code, api)({
+      tr: tr
+    });
+  };
 };
-var toggleCodeWithAnalytics = exports.toggleCodeWithAnalytics = function toggleCodeWithAnalytics(editorAnalyticsApi) {
+var toggleCodeWithAnalytics = exports.toggleCodeWithAnalytics = function toggleCodeWithAnalytics(editorAnalyticsApi, api) {
   return function (inputMethod) {
-    return function (_ref14) {
-      var tr = _ref14.tr;
+    return function (_ref15) {
+      var tr = _ref15.tr;
       var newTr = toggleCode({
+        api: api
+      })({
         tr: tr
       });
       if (!newTr) {

package/dist/cjs/pm-plugins/input-rule.js

@@ -20,6 +20,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _mark = require("@atlaskit/editor-common/mark");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -60,10 +61,12 @@ ValidAutoformatChars.STRIKE,
 ValidAutoformatChars.STRONG_MARKDOWN]), ValidAutoformatChars.CODE, [
 // e.g: loko (`some code`
 '( ']);
-function addMark(markType, schema, char) {
+
+// eslint-disable-next-line @typescript-eslint/max-params
+function addMark(markType, _schema, char, api) {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/max-params
-  return function (state, match, start, end) {
+  return function (state, _match, start, end) {
     var _schema$marks;
     var doc = state.doc,
       schema = state.schema,
@@ -97,7 +100,12 @@ function addMark(markType, schema, char) {
       return null;
     }
     if (markType.name === 'code') {
-      (0, _mark.transformNonTextNodesToText)(tr.mapping.map(start), tr.mapping.map(end), tr);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_resolve_marks')) {
+        var _api$base;
+        api === null || api === void 0 || (_api$base = api.base) === null || _api$base === void 0 || (_api$base = _api$base.actions) === null || _api$base === void 0 || _api$base.resolveMarks(tr.mapping.map(start), tr.mapping.map(end), tr);
+      } else {
+        (0, _mark.transformNonTextNodesToText)(tr.mapping.map(start), tr.mapping.map(end), tr);
+      }
     }
     var mappedStart = tr.mapping.map(start);
     var mappedEnd = tr.mapping.map(end);
@@ -242,7 +250,7 @@ function getStrikeInputRules(schema, editorAnalyticsAPI) {
  * @param {Schema} schema
  * @returns {InputRuleWrapper[]}
  */
-function getCodeInputRules(schema, editorAnalyticsAPI) {
+function getCodeInputRules(schema, editorAnalyticsAPI, api) {
   var ruleWithCodeAnalytics = (0, _utils.inputRuleWithAnalytics)({
     action: _analytics.ACTION.FORMATTED,
     actionSubject: _analytics.ACTION_SUBJECT.TEXT,
@@ -252,10 +260,10 @@ function getCodeInputRules(schema, editorAnalyticsAPI) {
       inputMethod: _analytics.INPUT_METHOD.FORMATTING
     }
   }, editorAnalyticsAPI);
-  var backTickRule = (0, _utils.createRule)(codeRegex, addMark(schema.marks.code, schema, ValidAutoformatChars.CODE));
+  var backTickRule = (0, _utils.createRule)(codeRegex, addMark(schema.marks.code, schema, ValidAutoformatChars.CODE, api));
   return [ruleWithCodeAnalytics(backTickRule)];
 }
-function inputRulePlugin(schema, editorAnalyticsAPI) {
+function inputRulePlugin(schema, editorAnalyticsAPI, api) {
   var rules = [];
   if (schema.marks.strong) {
     rules.push.apply(rules, (0, _toConsumableArray2.default)(getStrongInputRules(schema, editorAnalyticsAPI)));
@@ -267,7 +275,7 @@ function inputRulePlugin(schema, editorAnalyticsAPI) {
     rules.push.apply(rules, (0, _toConsumableArray2.default)(getStrikeInputRules(schema, editorAnalyticsAPI)));
   }
   if (schema.marks.code) {
-    rules.push.apply(rules, (0, _toConsumableArray2.default)(getCodeInputRules(schema, editorAnalyticsAPI)));
+    rules.push.apply(rules, (0, _toConsumableArray2.default)(getCodeInputRules(schema, editorAnalyticsAPI, api)));
   }
   if (rules.length !== 0) {
     return new _safePlugin.SafePlugin((0, _prosemirrorInputRules.createPlugin)('text-formatting', rules));

package/dist/cjs/textFormattingPlugin.js

@@ -93,7 +93,7 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
         plugin: function plugin(_ref4) {
           var _api$analytics2;
           var schema = _ref4.schema;
-          return (0, _inputRule.default)(schema, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+          return (0, _inputRule.default)(schema, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api);
         }
       }, {
         name: 'textFormattingSmartRule',

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

@@ -14,6 +14,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../editor-commands/utils");
 var _dropdownMenu = require("./dropdown-menu");
 var _clearFormattingIcon = require("./hooks/clear-formatting-icon");
@@ -139,7 +140,13 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("span", {
-      css: _styles.buttonGroupStyle
+      css:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      _styles.buttonGroupStyle :
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      _styles.buttonGroupStyleBeforeVisualRefresh
     }, (0, _react2.jsx)("div", {
       role: "group"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -156,6 +163,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       editorView: editorView,
       isReducedSpacing: isReducedSpacing
     }), (0, _react2.jsx)("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage
       css: _styles.wrapperStyle
     }, isToolbarDisabled ? (0, _react2.jsx)("div", null, (0, _react2.jsx)(_moreButton.MoreButton, {
       label: moreFormattingButtonLabel,

package/dist/cjs/ui/Toolbar/more-button.js

@@ -39,7 +39,7 @@ var MoreButton = exports.MoreButton = /*#__PURE__*/_react.default.memo(function
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
     iconBefore:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-prefix -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {
       css: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? MoreIconStyle : _styles.triggerWrapperStyles
     }, (0, _react2.jsx)(_showMoreHorizontalEditorMore.default, {

package/dist/cjs/ui/Toolbar/single-toolbar-buttons.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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; }
 /**
@@ -31,7 +32,13 @@ var SingleToolbarButtons = exports.SingleToolbarButtons = /*#__PURE__*/_react.de
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("span", {
-      css: _styles.buttonGroupStyle
+      css:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      _styles.buttonGroupStyle :
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      _styles.buttonGroupStyleBeforeVisualRefresh
     }, items.map(function (item) {
       var _item$ariaLabel;
       return (0, _react2.jsx)(_uiMenu.ToolbarButton, {

package/dist/es2019/editor-commands/utils/marks.js

@@ -0,0 +1,117 @@
+import { entireSelectionContainsMark, transformNonTextNodesToText } from '@atlaskit/editor-common/mark';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * A custom version of the ProseMirror toggleMark, where we only toggle marks
+ * on text nodes in the selection rather than all inline nodes.
+ * @param markType
+ * @param attrs
+ */
+export const nextToggleMark = (markType, api, attrs) => ({
+  tr
+}) => {
+  const mark = markType.create(attrs);
+
+  // For cursor selections we can use the default behaviour.
+  if (tr.selection instanceof TextSelection && tr.selection.$cursor) {
+    if (mark.isInSet(tr.storedMarks || tr.selection.$cursor.marks())) {
+      tr.removeStoredMark(mark);
+    } else {
+      tr.addStoredMark(mark);
+    }
+    return tr;
+  }
+  return nextToggleMarkInRange(mark, api)({
+    tr
+  });
+};
+const nextToggleMarkInRange = (mark, api) => ({
+  tr
+}) => {
+  if (tr.selection instanceof CellSelection) {
+    let removeMark = true;
+    const cells = [];
+    tr.selection.forEachCell((cell, cellPos) => {
+      cells.push({
+        node: cell,
+        pos: cellPos
+      });
+      const from = cellPos;
+      const to = cellPos + cell.nodeSize;
+      removeMark && (removeMark = entireSelectionContainsMark(mark, tr.doc, from, to));
+    });
+    for (let i = cells.length - 1; i >= 0; i--) {
+      const cell = cells[i];
+      const from = cell.pos;
+      const to = from + cell.node.nodeSize;
+      nextApplyMarkOnRange(from, to, removeMark, mark, tr, api);
+    }
+  } else {
+    const {
+      $from,
+      $to
+    } = tr.selection;
+    // We decide to remove the mark only if the entire selection contains the mark
+    // Examples with *bold* text
+    // Scenario 1: Selection contains both bold and non-bold text -> bold entire selection
+    // Scenario 2: Selection contains only bold text -> un-bold entire selection
+    // Scenario 3: Selection contains no bold text -> bold entire selection
+    const removeMark = entireSelectionContainsMark(mark, tr.doc, $from.pos, $to.pos);
+    nextApplyMarkOnRange($from.pos, $to.pos, removeMark, mark, tr, api);
+  }
+  if (tr.docChanged) {
+    return tr;
+  }
+  return null;
+};
+export const nextApplyMarkOnRange = (from, to, removeMark, mark, tr, api
+// eslint-disable-next-line @typescript-eslint/max-params
+) => {
+  const {
+    schema
+  } = tr.doc.type;
+  const {
+    code
+  } = schema.marks;
+  if (mark.type === code) {
+    if (fg('platform_editor_resolve_marks')) {
+      var _api$base;
+      api === null || api === void 0 ? void 0 : (_api$base = api.base) === null || _api$base === void 0 ? void 0 : _api$base.actions.resolveMarks(from, to, tr);
+    } else {
+      transformNonTextNodesToText(from, to, tr);
+    }
+  }
+
+  /**
+   * We should refactor this so text formatting doesn't reference plugins it doesn't know about.
+   */
+  tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), (node, pos) => {
+    if (fg('editor_inline_comments_on_inline_nodes')) {
+      if (!node.isText) {
+        const isAllowedInlineNode = ['emoji', 'status', 'date', 'mention', 'inlineCard'].includes(node.type.name);
+        if (!isAllowedInlineNode) {
+          return true;
+        }
+      }
+    } else {
+      if (!node.isText) {
+        return true;
+      }
+    }
+
+    // This is an issue when the user selects some text.
+    // We need to check if the current node position is less than the range selection from.
+    // If it’s true, that means we should apply the mark using the range selection,
+    // not the current node position.
+    const nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
+    const nodeBetweenTo = Math.min(pos + node.nodeSize, tr.mapping.map(to));
+    if (removeMark) {
+      tr.removeMark(nodeBetweenFrom, nodeBetweenTo, mark);
+    } else {
+      tr.addMark(nodeBetweenFrom, nodeBetweenTo, mark);
+    }
+    return true;
+  });
+  return tr;
+};

package/dist/es2019/pm-plugins/commands.js

@@ -1,5 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { toggleMark } from '@atlaskit/editor-common/mark';
+import { nextToggleMark } from '../editor-commands/utils/marks';
 export const toggleEm = ({
   tr
 }) => {
@@ -215,6 +216,8 @@ export const toggleSubscriptWithAnalytics = editorAnalyticsApi => inputMethod =>
   return newTr;
 };
 export const toggleCode = ({
+  api
+}) => ({
   tr
 }) => {
   const {
@@ -224,14 +227,16 @@ export const toggleCode = ({
     // No transaction to apply
     return null;
   }
-  return toggleMark(code)({
+  return nextToggleMark(code, api)({
     tr
   });
 };
-export const toggleCodeWithAnalytics = editorAnalyticsApi => inputMethod => ({
+export const toggleCodeWithAnalytics = (editorAnalyticsApi, api) => inputMethod => ({
   tr
 }) => {
   const newTr = toggleCode({
+    api
+  })({
     tr
   });
   if (!newTr) {

package/dist/es2019/pm-plugins/input-rule.js

@@ -2,6 +2,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { transformNonTextNodesToText } from '@atlaskit/editor-common/mark';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createRule, inputRuleWithAnalytics } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 var ValidAutoformatChars = /*#__PURE__*/function (ValidAutoformatChars) {
   ValidAutoformatChars["STRONG"] = "__";
@@ -46,10 +47,12 @@ export const ValidCombinations = {
   // e.g: loko (`some code`
   '( ']
 };
-function addMark(markType, schema, char) {
+
+// eslint-disable-next-line @typescript-eslint/max-params
+function addMark(markType, _schema, char, api) {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/max-params
-  return (state, match, start, end) => {
+  return (state, _match, start, end) => {
     var _schema$marks, _schema$marks$code;
     const {
       doc,
@@ -85,7 +88,12 @@ function addMark(markType, schema, char) {
       return null;
     }
     if (markType.name === 'code') {
-      transformNonTextNodesToText(tr.mapping.map(start), tr.mapping.map(end), tr);
+      if (fg('platform_editor_resolve_marks')) {
+        var _api$base, _api$base$actions;
+        api === null || api === void 0 ? void 0 : (_api$base = api.base) === null || _api$base === void 0 ? void 0 : (_api$base$actions = _api$base.actions) === null || _api$base$actions === void 0 ? void 0 : _api$base$actions.resolveMarks(tr.mapping.map(start), tr.mapping.map(end), tr);
+      } else {
+        transformNonTextNodesToText(tr.mapping.map(start), tr.mapping.map(end), tr);
+      }
     }
     const mappedStart = tr.mapping.map(start);
     const mappedEnd = tr.mapping.map(end);
@@ -220,7 +228,7 @@ function getStrikeInputRules(schema, editorAnalyticsAPI) {
  * @param {Schema} schema
  * @returns {InputRuleWrapper[]}
  */
-function getCodeInputRules(schema, editorAnalyticsAPI) {
+function getCodeInputRules(schema, editorAnalyticsAPI, api) {
   const ruleWithCodeAnalytics = inputRuleWithAnalytics({
     action: ACTION.FORMATTED,
     actionSubject: ACTION_SUBJECT.TEXT,
@@ -230,10 +238,10 @@ function getCodeInputRules(schema, editorAnalyticsAPI) {
       inputMethod: INPUT_METHOD.FORMATTING
     }
   }, editorAnalyticsAPI);
-  const backTickRule = createRule(codeRegex, addMark(schema.marks.code, schema, ValidAutoformatChars.CODE));
+  const backTickRule = createRule(codeRegex, addMark(schema.marks.code, schema, ValidAutoformatChars.CODE, api));
   return [ruleWithCodeAnalytics(backTickRule)];
 }
-export function inputRulePlugin(schema, editorAnalyticsAPI) {
+export function inputRulePlugin(schema, editorAnalyticsAPI, api) {
   const rules = [];
   if (schema.marks.strong) {
     rules.push(...getStrongInputRules(schema, editorAnalyticsAPI));
@@ -245,7 +253,7 @@ export function inputRulePlugin(schema, editorAnalyticsAPI) {
     rules.push(...getStrikeInputRules(schema, editorAnalyticsAPI));
   }
   if (schema.marks.code) {
-    rules.push(...getCodeInputRules(schema, editorAnalyticsAPI));
+    rules.push(...getCodeInputRules(schema, editorAnalyticsAPI, api));
   }
   if (rules.length !== 0) {
     return new SafePlugin(createPlugin('text-formatting', rules));

package/dist/es2019/textFormattingPlugin.js

@@ -86,7 +86,7 @@ export const textFormattingPlugin = ({
           schema
         }) => {
           var _api$analytics2;
-          return textFormattingInputRulePlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+          return textFormattingInputRulePlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api);
         }
       }, {
         name: 'textFormattingSmartRule',

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

@@ -9,8 +9,9 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { usePreviousState } from '@atlaskit/editor-common/hooks';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
-import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
+import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { Announcer } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { compareItemsArrays, isArrayContainsContent } from '../../editor-commands/utils';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { useClearIcon } from './hooks/clear-formatting-icon';
@@ -126,7 +127,13 @@ const ToolbarFormatting = ({
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("span", {
-      css: buttonGroupStyle
+      css:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-visual-refresh-icons') ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      buttonGroupStyle :
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      buttonGroupStyleBeforeVisualRefresh
     }, jsx("div", {
       role: "group"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -143,6 +150,7 @@ const ToolbarFormatting = ({
       editorView: editorView,
       isReducedSpacing: isReducedSpacing
     }), jsx("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage
       css: wrapperStyle
     }, isToolbarDisabled ? jsx("div", null, jsx(MoreButton, {
       label: moreFormattingButtonLabel,

package/dist/es2019/ui/Toolbar/more-button.js

@@ -32,7 +32,7 @@ export const MoreButton = /*#__PURE__*/React.memo(({
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
     iconBefore:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-prefix -- Ignored via go/DSP-18766
     jsx("div", {
       css: fg('platform-visual-refresh-icons') ? MoreIconStyle : triggerWrapperStyles
     }, jsx(ShowMoreHorizontalIcon, {

package/dist/es2019/ui/Toolbar/single-toolbar-buttons.js

@@ -6,8 +6,9 @@ import React, { useCallback } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { buttonGroupStyle } from '@atlaskit/editor-common/styles';
+import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   items,
   isReducedSpacing,
@@ -22,7 +23,13 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("span", {
-      css: buttonGroupStyle
+      css:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-visual-refresh-icons') ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      buttonGroupStyle :
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+      buttonGroupStyleBeforeVisualRefresh
     }, items.map(item => {
       var _item$ariaLabel;
       return jsx(ToolbarButton, {