@atlaskit/editor-plugin-text-formatting 30.1.0 → 30.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 30.2.0
+
+### Minor Changes
+
+- [`54f4bfbdf94ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54f4bfbdf94ad) -
+  [ux] Allow text styles on selections that contain inline code, behind
+  platform_editor_style_around_inline_code
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 30.1.0
 
 ### Minor Changes

package/dist/cjs/editor-commands/toggle-mark.js

@@ -6,7 +6,19 @@ 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 _enums = require("@atlaskit/editor-common/analytics/types/enums");
 var _commands = require("@atlaskit/editor-common/mark/commands");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _marks = require("./utils/marks");
+/**
+ * Toggles a text style mark. Behind `platform_editor_style_around_inline_code` it uses the
+ * package's own toggle, which can remove a style from a selection that also contains text
+ * excluding it (such as inline code).
+ */
+var toggleStyleMark = function toggleStyleMark(markType, attrs) {
+  if ((0, _fg.fg)('platform_editor_style_around_inline_code')) {
+    return (0, _marks.nextToggleMark)(markType, undefined, attrs);
+  }
+  return (0, _commands.toggleMark)(markType, attrs);
+};
 var toggleEm = exports.toggleEm = function toggleEm(_ref) {
   var tr = _ref.tr;
   var em = tr.doc.type.schema.marks.em;
@@ -14,7 +26,7 @@ var toggleEm = exports.toggleEm = function toggleEm(_ref) {
     // No transaction to apply
     return null;
   }
-  return (0, _commands.toggleMark)(em)({
+  return toggleStyleMark(em)({
     tr: tr
   });
 };
@@ -49,7 +61,7 @@ var toggleStrike = exports.toggleStrike = function toggleStrike(_ref3) {
     // No transaction to apply
     return null;
   }
-  return (0, _commands.toggleMark)(strike)({
+  return toggleStyleMark(strike)({
     tr: tr
   });
 };
@@ -84,7 +96,7 @@ var toggleStrong = exports.toggleStrong = function toggleStrong(_ref5) {
     // No transaction to apply
     return null;
   }
-  return (0, _commands.toggleMark)(strong)({
+  return toggleStyleMark(strong)({
     tr: tr
   });
 };
@@ -119,7 +131,7 @@ var toggleUnderline = exports.toggleUnderline = function toggleUnderline(_ref7)
     // No transaction to apply
     return null;
   }
-  return (0, _commands.toggleMark)(underline)({
+  return toggleStyleMark(underline)({
     tr: tr
   });
 };
@@ -154,7 +166,7 @@ var toggleSuperscript = exports.toggleSuperscript = function toggleSuperscript(_
     // No transaction to apply
     return null;
   }
-  return (0, _commands.toggleMark)(subsup, {
+  return toggleStyleMark(subsup, {
     type: 'sup'
   })({
     tr: tr
@@ -191,7 +203,7 @@ var toggleSubscript = exports.toggleSubscript = function toggleSubscript(_ref1)
     // No transaction to apply
     return null;
   }
-  return (0, _commands.toggleMark)(subsup, {
+  return toggleStyleMark(subsup, {
     type: 'sub'
   })({
     tr: tr

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

@@ -33,6 +33,33 @@ var nextToggleMark = exports.nextToggleMark = function nextToggleMark(markType,
     });
   };
 };
+
+/**
+ * Like `entireSelectionContainsMark`, but ignores text that can never carry the mark because
+ * one of its marks excludes it (for example inline code excludes bold). Without this, a mixed
+ * selection containing inline code could be styled but never un-styled.
+ *
+ * Returns true when no text in the range can take the mark (for example a selection of only
+ * inline code). The caller then removes a mark that is not there, which changes nothing.
+ */
+var entireStyleableSelectionContainsMark = function entireStyleableSelectionContainsMark(mark, doc, fromPos, toPos) {
+  var onlyContainsMark = true;
+  doc.nodesBetween(fromPos, toPos, function (node) {
+    if (!onlyContainsMark) {
+      return false;
+    }
+    if (node.isText && !(0, _mark.isMarkExcluded)(mark.type, node.marks)) {
+      onlyContainsMark = mark.isInSet(node.marks);
+    }
+  });
+  return onlyContainsMark;
+};
+var selectionContainsMark = function selectionContainsMark(mark, doc, fromPos, toPos) {
+  if ((0, _fg.fg)('platform_editor_style_around_inline_code')) {
+    return entireStyleableSelectionContainsMark(mark, doc, fromPos, toPos);
+  }
+  return (0, _mark.entireSelectionContainsMark)(mark, doc, fromPos, toPos);
+};
 var nextToggleMarkInRange = function nextToggleMarkInRange(mark, api) {
   return function (_ref2) {
     var tr = _ref2.tr;
@@ -46,7 +73,7 @@ var nextToggleMarkInRange = function nextToggleMarkInRange(mark, api) {
         });
         var from = cellPos;
         var to = cellPos + cell.nodeSize;
-        removeMark && (removeMark = (0, _mark.entireSelectionContainsMark)(mark, tr.doc, from, to));
+        removeMark && (removeMark = selectionContainsMark(mark, tr.doc, from, to));
       });
       for (var i = cells.length - 1; i >= 0; i--) {
         var cell = cells[i];
@@ -63,7 +90,7 @@ var nextToggleMarkInRange = function nextToggleMarkInRange(mark, api) {
       // 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);
+      var _removeMark = selectionContainsMark(mark, tr.doc, $from.pos, $to.pos);
       nextApplyMarkOnRange($from.pos, $to.pos, _removeMark, mark, tr, api);
     }
     if (tr.docChanged) {

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

@@ -15,6 +15,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _textFormatting2 = _interopRequireWildcard(require("../editor-commands/text-formatting"));
 var commands = _textFormatting2;
@@ -41,6 +42,59 @@ var checkNodeSelection = function checkNodeSelection(mark, editorState, type) {
     type: type
   })(editorState);
 };
+
+/**
+ * Whether a range selection holds any text that can take `markType`, i.e. text whose marks
+ * (such as inline code) do not exclude it. Cursor selections return false.
+ */
+var selectionHasTextAcceptingMark = function selectionHasTextAcceptingMark(editorState, markType) {
+  var selection = editorState.selection,
+    doc = editorState.doc;
+  if (selection.empty) {
+    return false;
+  }
+  var hasTextAcceptingMark = false;
+  var _iterator = _createForOfIteratorHelper(selection.ranges),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _step.value,
+        $from = _step$value.$from,
+        $to = _step$value.$to;
+      doc.nodesBetween($from.pos, $to.pos, function (node) {
+        if (hasTextAcceptingMark) {
+          return false;
+        }
+        if (node.isText && !(0, _mark.isMarkExcluded)(markType, node.marks)) {
+          hasTextAcceptingMark = true;
+        }
+      });
+      if (hasTextAcceptingMark) {
+        break;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return hasTextAcceptingMark;
+};
+
+/**
+ * Whether inline code in the selection should disable `markType`. Behind
+ * `platform_editor_style_around_inline_code`, code only disables a mark when no other text in the
+ * selection could take it.
+ */
+var isDisabledByCode = function isDisabledByCode(codeInSelection, markType, editorState) {
+  if (!codeInSelection) {
+    return false;
+  }
+  if ((0, _fg.fg)('platform_editor_style_around_inline_code')) {
+    return !selectionHasTextAcceptingMark(editorState, markType);
+  }
+  return true;
+};
 var getTextFormattingState = function getTextFormattingState(editorState, _editorAnalyticsAPI) {
   var _editorState$schema$m = editorState.schema.marks,
     em = _editorState$schema$m.em,
@@ -74,26 +128,27 @@ var getTextFormattingState = function getTextFormattingState(editorState, _edito
     });
     var marksToName = new Map(marks);
     var activeMarks = (0, _textFormatting.wholeSelectionHasMarks)(editorState, Array.from(marksToName.keys()));
-    var _iterator = _createForOfIteratorHelper(marks),
-      _step;
+    var _iterator2 = _createForOfIteratorHelper(marks),
+      _step2;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
-          mark = _step$value[0],
-          markName = _step$value[1];
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _step2$value = (0, _slicedToArray2.default)(_step2.value, 2),
+          mark = _step2$value[0],
+          markName = _step2$value[1];
         var active = activeMarks.get(mark);
         if (active !== undefined) {
           state["".concat(markName, "Active")] = active;
         }
+        var markType = mark instanceof _model.MarkType ? mark : mark.type;
         state["".concat(markName, "Disabled")] =
         // Disable when code is active, except for code itself which should not be disabled
         // when code is in selection 😅
-        state.codeInSelection && markName !== 'code' ? true : !checkNodeSelection(mark instanceof _model.MarkType ? mark : mark.type, editorState);
+        markName !== 'code' && isDisabledByCode(state.codeInSelection, markType, editorState) ? true : !checkNodeSelection(markType, editorState);
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator.f();
+      _iterator2.f();
     }
     return state;
   }
@@ -103,15 +158,15 @@ var getTextFormattingState = function getTextFormattingState(editorState, _edito
   }
   if (em) {
     state.emActive = (0, _mark.anyMarkActive)(editorState, em);
-    state.emDisabled = state.codeActive ? true : !checkNodeSelection(em, editorState);
+    state.emDisabled = isDisabledByCode(state.codeActive, em, editorState) ? true : !checkNodeSelection(em, editorState);
   }
   if (strike) {
     state.strikeActive = (0, _mark.anyMarkActive)(editorState, strike);
-    state.strikeDisabled = state.codeActive ? true : !checkNodeSelection(strike, editorState);
+    state.strikeDisabled = isDisabledByCode(state.codeActive, strike, editorState) ? true : !checkNodeSelection(strike, editorState);
   }
   if (strong) {
     state.strongActive = (0, _mark.anyMarkActive)(editorState, strong);
-    state.strongDisabled = state.codeActive ? true : !checkNodeSelection(strong, editorState);
+    state.strongDisabled = isDisabledByCode(state.codeActive, strong, editorState) ? true : !checkNodeSelection(strong, editorState);
   }
   if (subsup) {
     var subMark = subsup.create({
@@ -122,12 +177,12 @@ var getTextFormattingState = function getTextFormattingState(editorState, _edito
     });
     state.subscriptActive = (0, _mark.anyMarkActive)(editorState, subMark);
     state.superscriptActive = (0, _mark.anyMarkActive)(editorState, supMark);
-    state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
-    state.superscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sup');
+    state.subscriptDisabled = isDisabledByCode(state.codeActive, subsup, editorState) ? true : !checkNodeSelection(subsup, editorState, 'sub');
+    state.superscriptDisabled = isDisabledByCode(state.codeActive, subsup, editorState) ? true : !checkNodeSelection(subsup, editorState, 'sup');
   }
   if (underline) {
     state.underlineActive = (0, _mark.anyMarkActive)(editorState, underline);
-    state.underlineDisabled = state.codeActive ? true : !checkNodeSelection(underline, editorState);
+    state.underlineDisabled = isDisabledByCode(state.codeActive, underline, editorState) ? true : !checkNodeSelection(underline, editorState);
   }
   return state;
 };

package/dist/es2019/editor-commands/toggle-mark.js

@@ -1,6 +1,19 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics/types/enums';
 import { toggleMark } from '@atlaskit/editor-common/mark/commands';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { nextToggleMark } from './utils/marks';
+
+/**
+ * Toggles a text style mark. Behind `platform_editor_style_around_inline_code` it uses the
+ * package's own toggle, which can remove a style from a selection that also contains text
+ * excluding it (such as inline code).
+ */
+const toggleStyleMark = (markType, attrs) => {
+  if (fg('platform_editor_style_around_inline_code')) {
+    return nextToggleMark(markType, undefined, attrs);
+  }
+  return toggleMark(markType, attrs);
+};
 export const toggleEm = ({
   tr
 }) => {
@@ -11,7 +24,7 @@ export const toggleEm = ({
     // No transaction to apply
     return null;
   }
-  return toggleMark(em)({
+  return toggleStyleMark(em)({
     tr
   });
 };
@@ -46,7 +59,7 @@ export const toggleStrike = ({
     // No transaction to apply
     return null;
   }
-  return toggleMark(strike)({
+  return toggleStyleMark(strike)({
     tr
   });
 };
@@ -81,7 +94,7 @@ export const toggleStrong = ({
     // No transaction to apply
     return null;
   }
-  return toggleMark(strong)({
+  return toggleStyleMark(strong)({
     tr
   });
 };
@@ -116,7 +129,7 @@ export const toggleUnderline = ({
     // No transaction to apply
     return null;
   }
-  return toggleMark(underline)({
+  return toggleStyleMark(underline)({
     tr
   });
 };
@@ -151,7 +164,7 @@ export const toggleSuperscript = ({
     // No transaction to apply
     return null;
   }
-  return toggleMark(subsup, {
+  return toggleStyleMark(subsup, {
     type: 'sup'
   })({
     tr
@@ -188,7 +201,7 @@ export const toggleSubscript = ({
     // No transaction to apply
     return null;
   }
-  return toggleMark(subsup, {
+  return toggleStyleMark(subsup, {
     type: 'sub'
   })({
     tr

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

@@ -1,4 +1,4 @@
-import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
+import { entireSelectionContainsMark, isMarkExcluded } 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/fg';
@@ -26,6 +26,33 @@ export const nextToggleMark = (markType, api, attrs) => ({
     tr
   });
 };
+
+/**
+ * Like `entireSelectionContainsMark`, but ignores text that can never carry the mark because
+ * one of its marks excludes it (for example inline code excludes bold). Without this, a mixed
+ * selection containing inline code could be styled but never un-styled.
+ *
+ * Returns true when no text in the range can take the mark (for example a selection of only
+ * inline code). The caller then removes a mark that is not there, which changes nothing.
+ */
+const entireStyleableSelectionContainsMark = (mark, doc, fromPos, toPos) => {
+  let onlyContainsMark = true;
+  doc.nodesBetween(fromPos, toPos, node => {
+    if (!onlyContainsMark) {
+      return false;
+    }
+    if (node.isText && !isMarkExcluded(mark.type, node.marks)) {
+      onlyContainsMark = mark.isInSet(node.marks);
+    }
+  });
+  return onlyContainsMark;
+};
+const selectionContainsMark = (mark, doc, fromPos, toPos) => {
+  if (fg('platform_editor_style_around_inline_code')) {
+    return entireStyleableSelectionContainsMark(mark, doc, fromPos, toPos);
+  }
+  return entireSelectionContainsMark(mark, doc, fromPos, toPos);
+};
 const nextToggleMarkInRange = (mark, api) => ({
   tr
 }) => {
@@ -39,7 +66,7 @@ const nextToggleMarkInRange = (mark, api) => ({
       });
       const from = cellPos;
       const to = cellPos + cell.nodeSize;
-      removeMark && (removeMark = entireSelectionContainsMark(mark, tr.doc, from, to));
+      removeMark && (removeMark = selectionContainsMark(mark, tr.doc, from, to));
     });
     for (let i = cells.length - 1; i >= 0; i--) {
       const cell = cells[i];
@@ -57,7 +84,7 @@ const nextToggleMarkInRange = (mark, api) => ({
     // 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);
+    const removeMark = selectionContainsMark(mark, tr.doc, $from.pos, $to.pos);
     nextApplyMarkOnRange($from.pos, $to.pos, removeMark, mark, tr, api);
   }
   if (tr.docChanged) {

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

@@ -2,13 +2,14 @@
 // import { toggleMark } from '@atlaskit/editor-common/mark';
 
 import { moveLeft as keymapMoveLeft, moveRight as keymapMoveRight } from '@atlaskit/editor-common/keymaps';
-import { anyMarkActive } from '@atlaskit/editor-common/mark';
+import { anyMarkActive, isMarkExcluded } from '@atlaskit/editor-common/mark';
 import { wholeSelectionHasMarks } from '@atlaskit/editor-common/mark/text-formatting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { shallowEqual } from '@atlaskit/editor-common/utils';
 import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { createInlineCodeFromTextInputWithAnalytics } from '../editor-commands/text-formatting';
 // Ignored via go/ees005
@@ -30,6 +31,53 @@ const checkNodeSelection = (mark, editorState, type) => {
     type: type
   })(editorState);
 };
+
+/**
+ * Whether a range selection holds any text that can take `markType`, i.e. text whose marks
+ * (such as inline code) do not exclude it. Cursor selections return false.
+ */
+const selectionHasTextAcceptingMark = (editorState, markType) => {
+  const {
+    selection,
+    doc
+  } = editorState;
+  if (selection.empty) {
+    return false;
+  }
+  let hasTextAcceptingMark = false;
+  for (const {
+    $from,
+    $to
+  } of selection.ranges) {
+    doc.nodesBetween($from.pos, $to.pos, node => {
+      if (hasTextAcceptingMark) {
+        return false;
+      }
+      if (node.isText && !isMarkExcluded(markType, node.marks)) {
+        hasTextAcceptingMark = true;
+      }
+    });
+    if (hasTextAcceptingMark) {
+      break;
+    }
+  }
+  return hasTextAcceptingMark;
+};
+
+/**
+ * Whether inline code in the selection should disable `markType`. Behind
+ * `platform_editor_style_around_inline_code`, code only disables a mark when no other text in the
+ * selection could take it.
+ */
+const isDisabledByCode = (codeInSelection, markType, editorState) => {
+  if (!codeInSelection) {
+    return false;
+  }
+  if (fg('platform_editor_style_around_inline_code')) {
+    return !selectionHasTextAcceptingMark(editorState, markType);
+  }
+  return true;
+};
 const getTextFormattingState = (editorState, _editorAnalyticsAPI) => {
   const {
     em,
@@ -65,10 +113,11 @@ const getTextFormattingState = (editorState, _editorAnalyticsAPI) => {
       if (active !== undefined) {
         state[`${markName}Active`] = active;
       }
+      const markType = mark instanceof MarkType ? mark : mark.type;
       state[`${markName}Disabled`] =
       // Disable when code is active, except for code itself which should not be disabled
       // when code is in selection 😅
-      state.codeInSelection && markName !== 'code' ? true : !checkNodeSelection(mark instanceof MarkType ? mark : mark.type, editorState);
+      markName !== 'code' && isDisabledByCode(state.codeInSelection, markType, editorState) ? true : !checkNodeSelection(markType, editorState);
     }
     return state;
   }
@@ -78,15 +127,15 @@ const getTextFormattingState = (editorState, _editorAnalyticsAPI) => {
   }
   if (em) {
     state.emActive = anyMarkActive(editorState, em);
-    state.emDisabled = state.codeActive ? true : !checkNodeSelection(em, editorState);
+    state.emDisabled = isDisabledByCode(state.codeActive, em, editorState) ? true : !checkNodeSelection(em, editorState);
   }
   if (strike) {
     state.strikeActive = anyMarkActive(editorState, strike);
-    state.strikeDisabled = state.codeActive ? true : !checkNodeSelection(strike, editorState);
+    state.strikeDisabled = isDisabledByCode(state.codeActive, strike, editorState) ? true : !checkNodeSelection(strike, editorState);
   }
   if (strong) {
     state.strongActive = anyMarkActive(editorState, strong);
-    state.strongDisabled = state.codeActive ? true : !checkNodeSelection(strong, editorState);
+    state.strongDisabled = isDisabledByCode(state.codeActive, strong, editorState) ? true : !checkNodeSelection(strong, editorState);
   }
   if (subsup) {
     const subMark = subsup.create({
@@ -97,12 +146,12 @@ const getTextFormattingState = (editorState, _editorAnalyticsAPI) => {
     });
     state.subscriptActive = anyMarkActive(editorState, subMark);
     state.superscriptActive = anyMarkActive(editorState, supMark);
-    state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
-    state.superscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sup');
+    state.subscriptDisabled = isDisabledByCode(state.codeActive, subsup, editorState) ? true : !checkNodeSelection(subsup, editorState, 'sub');
+    state.superscriptDisabled = isDisabledByCode(state.codeActive, subsup, editorState) ? true : !checkNodeSelection(subsup, editorState, 'sup');
   }
   if (underline) {
     state.underlineActive = anyMarkActive(editorState, underline);
-    state.underlineDisabled = state.codeActive ? true : !checkNodeSelection(underline, editorState);
+    state.underlineDisabled = isDisabledByCode(state.codeActive, underline, editorState) ? true : !checkNodeSelection(underline, editorState);
   }
   return state;
 };

package/dist/esm/editor-commands/toggle-mark.js

@@ -1,6 +1,19 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics/types/enums';
 import { toggleMark } from '@atlaskit/editor-common/mark/commands';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { nextToggleMark } from './utils/marks';
+
+/**
+ * Toggles a text style mark. Behind `platform_editor_style_around_inline_code` it uses the
+ * package's own toggle, which can remove a style from a selection that also contains text
+ * excluding it (such as inline code).
+ */
+var toggleStyleMark = function toggleStyleMark(markType, attrs) {
+  if (fg('platform_editor_style_around_inline_code')) {
+    return nextToggleMark(markType, undefined, attrs);
+  }
+  return toggleMark(markType, attrs);
+};
 export var toggleEm = function toggleEm(_ref) {
   var tr = _ref.tr;
   var em = tr.doc.type.schema.marks.em;
@@ -8,7 +21,7 @@ export var toggleEm = function toggleEm(_ref) {
     // No transaction to apply
     return null;
   }
-  return toggleMark(em)({
+  return toggleStyleMark(em)({
     tr: tr
   });
 };
@@ -43,7 +56,7 @@ export var toggleStrike = function toggleStrike(_ref3) {
     // No transaction to apply
     return null;
   }
-  return toggleMark(strike)({
+  return toggleStyleMark(strike)({
     tr: tr
   });
 };
@@ -78,7 +91,7 @@ export var toggleStrong = function toggleStrong(_ref5) {
     // No transaction to apply
     return null;
   }
-  return toggleMark(strong)({
+  return toggleStyleMark(strong)({
     tr: tr
   });
 };
@@ -113,7 +126,7 @@ export var toggleUnderline = function toggleUnderline(_ref7) {
     // No transaction to apply
     return null;
   }
-  return toggleMark(underline)({
+  return toggleStyleMark(underline)({
     tr: tr
   });
 };
@@ -148,7 +161,7 @@ export var toggleSuperscript = function toggleSuperscript(_ref9) {
     // No transaction to apply
     return null;
   }
-  return toggleMark(subsup, {
+  return toggleStyleMark(subsup, {
     type: 'sup'
   })({
     tr: tr
@@ -185,7 +198,7 @@ export var toggleSubscript = function toggleSubscript(_ref1) {
     // No transaction to apply
     return null;
   }
-  return toggleMark(subsup, {
+  return toggleStyleMark(subsup, {
     type: 'sub'
   })({
     tr: tr

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

@@ -1,4 +1,4 @@
-import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
+import { entireSelectionContainsMark, isMarkExcluded } 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/fg';
@@ -27,6 +27,33 @@ export var nextToggleMark = function nextToggleMark(markType, api, attrs) {
     });
   };
 };
+
+/**
+ * Like `entireSelectionContainsMark`, but ignores text that can never carry the mark because
+ * one of its marks excludes it (for example inline code excludes bold). Without this, a mixed
+ * selection containing inline code could be styled but never un-styled.
+ *
+ * Returns true when no text in the range can take the mark (for example a selection of only
+ * inline code). The caller then removes a mark that is not there, which changes nothing.
+ */
+var entireStyleableSelectionContainsMark = function entireStyleableSelectionContainsMark(mark, doc, fromPos, toPos) {
+  var onlyContainsMark = true;
+  doc.nodesBetween(fromPos, toPos, function (node) {
+    if (!onlyContainsMark) {
+      return false;
+    }
+    if (node.isText && !isMarkExcluded(mark.type, node.marks)) {
+      onlyContainsMark = mark.isInSet(node.marks);
+    }
+  });
+  return onlyContainsMark;
+};
+var selectionContainsMark = function selectionContainsMark(mark, doc, fromPos, toPos) {
+  if (fg('platform_editor_style_around_inline_code')) {
+    return entireStyleableSelectionContainsMark(mark, doc, fromPos, toPos);
+  }
+  return entireSelectionContainsMark(mark, doc, fromPos, toPos);
+};
 var nextToggleMarkInRange = function nextToggleMarkInRange(mark, api) {
   return function (_ref2) {
     var tr = _ref2.tr;
@@ -40,7 +67,7 @@ var nextToggleMarkInRange = function nextToggleMarkInRange(mark, api) {
         });
         var from = cellPos;
         var to = cellPos + cell.nodeSize;
-        removeMark && (removeMark = entireSelectionContainsMark(mark, tr.doc, from, to));
+        removeMark && (removeMark = selectionContainsMark(mark, tr.doc, from, to));
       });
       for (var i = cells.length - 1; i >= 0; i--) {
         var cell = cells[i];
@@ -57,7 +84,7 @@ var nextToggleMarkInRange = function nextToggleMarkInRange(mark, api) {
       // 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 = entireSelectionContainsMark(mark, tr.doc, $from.pos, $to.pos);
+      var _removeMark = selectionContainsMark(mark, tr.doc, $from.pos, $to.pos);
       nextApplyMarkOnRange($from.pos, $to.pos, _removeMark, mark, tr, api);
     }
     if (tr.docChanged) {

package/dist/esm/pm-plugins/main.js

@@ -6,13 +6,14 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 // import { toggleMark } from '@atlaskit/editor-common/mark';
 
 import { moveLeft as keymapMoveLeft, moveRight as keymapMoveRight } from '@atlaskit/editor-common/keymaps';
-import { anyMarkActive } from '@atlaskit/editor-common/mark';
+import { anyMarkActive, isMarkExcluded } from '@atlaskit/editor-common/mark';
 import { wholeSelectionHasMarks } from '@atlaskit/editor-common/mark/text-formatting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { shallowEqual } from '@atlaskit/editor-common/utils';
 import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { createInlineCodeFromTextInputWithAnalytics } from '../editor-commands/text-formatting';
 // Ignored via go/ees005
@@ -34,6 +35,59 @@ var checkNodeSelection = function checkNodeSelection(mark, editorState, type) {
     type: type
   })(editorState);
 };
+
+/**
+ * Whether a range selection holds any text that can take `markType`, i.e. text whose marks
+ * (such as inline code) do not exclude it. Cursor selections return false.
+ */
+var selectionHasTextAcceptingMark = function selectionHasTextAcceptingMark(editorState, markType) {
+  var selection = editorState.selection,
+    doc = editorState.doc;
+  if (selection.empty) {
+    return false;
+  }
+  var hasTextAcceptingMark = false;
+  var _iterator = _createForOfIteratorHelper(selection.ranges),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _step.value,
+        $from = _step$value.$from,
+        $to = _step$value.$to;
+      doc.nodesBetween($from.pos, $to.pos, function (node) {
+        if (hasTextAcceptingMark) {
+          return false;
+        }
+        if (node.isText && !isMarkExcluded(markType, node.marks)) {
+          hasTextAcceptingMark = true;
+        }
+      });
+      if (hasTextAcceptingMark) {
+        break;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return hasTextAcceptingMark;
+};
+
+/**
+ * Whether inline code in the selection should disable `markType`. Behind
+ * `platform_editor_style_around_inline_code`, code only disables a mark when no other text in the
+ * selection could take it.
+ */
+var isDisabledByCode = function isDisabledByCode(codeInSelection, markType, editorState) {
+  if (!codeInSelection) {
+    return false;
+  }
+  if (fg('platform_editor_style_around_inline_code')) {
+    return !selectionHasTextAcceptingMark(editorState, markType);
+  }
+  return true;
+};
 var getTextFormattingState = function getTextFormattingState(editorState, _editorAnalyticsAPI) {
   var _editorState$schema$m = editorState.schema.marks,
     em = _editorState$schema$m.em,
@@ -67,26 +121,27 @@ var getTextFormattingState = function getTextFormattingState(editorState, _edito
     });
     var marksToName = new Map(marks);
     var activeMarks = wholeSelectionHasMarks(editorState, Array.from(marksToName.keys()));
-    var _iterator = _createForOfIteratorHelper(marks),
-      _step;
+    var _iterator2 = _createForOfIteratorHelper(marks),
+      _step2;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _step$value = _slicedToArray(_step.value, 2),
-          mark = _step$value[0],
-          markName = _step$value[1];
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _step2$value = _slicedToArray(_step2.value, 2),
+          mark = _step2$value[0],
+          markName = _step2$value[1];
         var active = activeMarks.get(mark);
         if (active !== undefined) {
           state["".concat(markName, "Active")] = active;
         }
+        var markType = mark instanceof MarkType ? mark : mark.type;
         state["".concat(markName, "Disabled")] =
         // Disable when code is active, except for code itself which should not be disabled
         // when code is in selection 😅
-        state.codeInSelection && markName !== 'code' ? true : !checkNodeSelection(mark instanceof MarkType ? mark : mark.type, editorState);
+        markName !== 'code' && isDisabledByCode(state.codeInSelection, markType, editorState) ? true : !checkNodeSelection(markType, editorState);
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator.f();
+      _iterator2.f();
     }
     return state;
   }
@@ -96,15 +151,15 @@ var getTextFormattingState = function getTextFormattingState(editorState, _edito
   }
   if (em) {
     state.emActive = anyMarkActive(editorState, em);
-    state.emDisabled = state.codeActive ? true : !checkNodeSelection(em, editorState);
+    state.emDisabled = isDisabledByCode(state.codeActive, em, editorState) ? true : !checkNodeSelection(em, editorState);
   }
   if (strike) {
     state.strikeActive = anyMarkActive(editorState, strike);
-    state.strikeDisabled = state.codeActive ? true : !checkNodeSelection(strike, editorState);
+    state.strikeDisabled = isDisabledByCode(state.codeActive, strike, editorState) ? true : !checkNodeSelection(strike, editorState);
   }
   if (strong) {
     state.strongActive = anyMarkActive(editorState, strong);
-    state.strongDisabled = state.codeActive ? true : !checkNodeSelection(strong, editorState);
+    state.strongDisabled = isDisabledByCode(state.codeActive, strong, editorState) ? true : !checkNodeSelection(strong, editorState);
   }
   if (subsup) {
     var subMark = subsup.create({
@@ -115,12 +170,12 @@ var getTextFormattingState = function getTextFormattingState(editorState, _edito
     });
     state.subscriptActive = anyMarkActive(editorState, subMark);
     state.superscriptActive = anyMarkActive(editorState, supMark);
-    state.subscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sub');
-    state.superscriptDisabled = state.codeActive ? true : !checkNodeSelection(subsup, editorState, 'sup');
+    state.subscriptDisabled = isDisabledByCode(state.codeActive, subsup, editorState) ? true : !checkNodeSelection(subsup, editorState, 'sub');
+    state.superscriptDisabled = isDisabledByCode(state.codeActive, subsup, editorState) ? true : !checkNodeSelection(subsup, editorState, 'sup');
   }
   if (underline) {
     state.underlineActive = anyMarkActive(editorState, underline);
-    state.underlineDisabled = state.codeActive ? true : !checkNodeSelection(underline, editorState);
+    state.underlineDisabled = isDisabledByCode(state.codeActive, underline, editorState) ? true : !checkNodeSelection(underline, editorState);
   }
   return state;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-formatting",
-	"version": "30.1.0",
+	"version": "30.2.0",
 	"description": "Text-formatting plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 		"@atlaskit/editor-plugin-selection-toolbar": "^31.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^27.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
-		"@atlaskit/editor-shared-styles": "^4.6.0",
+		"@atlaskit/editor-shared-styles": "^5.0.0",
 		"@atlaskit/editor-tables": "^3.2.0",
 		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/editor-toolbar-model": "^1.2.0",
@@ -45,7 +45,7 @@
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^134.3.0",
+		"@atlaskit/editor-common": "^134.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -56,6 +56,9 @@
 	"platform-feature-flags": {
 		"editor_inline_comments_on_inline_nodes": {
 			"type": "boolean"
+		},
+		"platform_editor_style_around_inline_code": {
+			"type": "boolean"
 		}
 	}
 }