@atlaskit/editor-plugin-code-bidi-warning 2.1.3 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-code-bidi-warning
 
+## 2.2.0
+
+### Minor Changes
+
+- [#180500](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180500)
+  [`411796e8a55c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/411796e8a55c6) -
+  [ux] Move code-bidi-warning plugin widget to be a vanilla-DOM implementation, instead of react, to
+  fix memory leaks.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.3
 
 ### Patch Changes

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCodeBidiWarningDomSpec = getCodeBidiWarningDomSpec;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+function getCodeBidiWarningDomSpec(bidiCharacter, codeBidiWarningLabel, tooltipEnabled) {
+  var _bidiCharacter$codePo;
+  var bidiCharacterCode = "U+".concat((_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 || (_bidiCharacter$codePo = _bidiCharacter$codePo.toString(16)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toUpperCase());
+  return ['span', {
+    'data-prosemirror-node-name': 'code-bidi-warning',
+    dir: 'ltr'
+  },
+  // Code Bidi Warning Decorator
+  ['span', {
+    'data-bidi-component': 'code-bidi-warning-decorator',
+    'data-testid': 'code-bidi-warning-decorator',
+    'data-bidi-character-code': bidiCharacterCode,
+    role: 'mark'
+  },
+  // Mark the < and > characters as visually hidden for screen readers
+  ['span', {
+    'aria-hidden': 'true'
+  }, '<'], bidiCharacterCode, ['span', {
+    'aria-hidden': 'true'
+  }, '>']]].concat((0, _toConsumableArray2.default)(tooltipEnabled ? [['span', {
+    'data-bidi-component': 'code-bidi-warning-tooltip',
+    role: 'tooltip'
+  }, codeBidiWarningLabel]] : []));
+}

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

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = void 0;
 var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _pluginFactory = require("./plugin-factory");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("./plugin-key");
+var _reactPluginFactory = require("./react-plugin-factory");
+var _vanillaPluginFactory = require("./vanilla-plugin-factory");
 var createPlugin = exports.createPlugin = function createPlugin(_ref, _ref2) {
   var dispatch = _ref.dispatch,
     getIntl = _ref.getIntl,
@@ -15,14 +17,18 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref, _ref2) {
   var appearance = _ref2.appearance;
   var intl = getIntl();
   var codeBidiWarningLabel = intl.formatMessage(_messages.codeBidiWarningMessages.label);
-  var _pluginFactoryCreator = (0, _pluginFactory.pluginFactoryCreator)(nodeViewPortalProviderAPI),
-    createPluginState = _pluginFactoryCreator.createPluginState,
-    getPluginState = _pluginFactoryCreator.getPluginState;
+  var _ref3 = (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') ? (0, _vanillaPluginFactory.pluginFactoryCreator)() : (0, _reactPluginFactory.pluginFactoryCreator)(nodeViewPortalProviderAPI),
+    createPluginState = _ref3.createPluginState,
+    getPluginState = _ref3.getPluginState;
   return new _safePlugin.SafePlugin({
     key: _pluginKey.codeBidiWarningPluginKey,
     state: createPluginState(dispatch, function (state) {
       return {
-        decorationSet: (0, _pluginFactory.createBidiWarningsDecorationSetFromDoc)({
+        decorationSet: (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') ? (0, _vanillaPluginFactory.createBidiWarningsDecorationSetFromDoc)({
+          doc: state.doc,
+          codeBidiWarningLabel: codeBidiWarningLabel,
+          tooltipEnabled: true
+        }) : (0, _reactPluginFactory.createBidiWarningsDecorationSetFromDoc)({
           doc: state.doc,
           codeBidiWarningLabel: codeBidiWarningLabel,
           tooltipEnabled: true,

package/dist/cjs/pm-plugins/vanilla-plugin-factory.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBidiWarningsDecorationSetFromDoc = createBidiWarningsDecorationSetFromDoc;
+exports.pluginFactoryCreator = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bidiWarningDecorator = _interopRequireDefault(require("@atlaskit/code/bidi-warning-decorator"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _codeBidiWarningDomSpec = require("./codeBidiWarningDomSpec");
+var _pluginKey = require("./plugin-key");
+var _reducer = _interopRequireDefault(require("./reducer"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var pluginFactoryCreator = exports.pluginFactoryCreator = function pluginFactoryCreator() {
+  return (0, _utils.pluginFactory)(_pluginKey.codeBidiWarningPluginKey, _reducer.default, {
+    onDocChanged: function onDocChanged(tr, pluginState) {
+      if (!tr.steps.find(_utils.stepHasSlice)) {
+        return pluginState;
+      }
+      var newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
+        doc: tr.doc,
+        codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
+        tooltipEnabled: pluginState.tooltipEnabled
+      });
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        decorationSet: newBidiWarningsDecorationSet
+      });
+    }
+  });
+};
+function createBidiWarningsDecorationSetFromDoc(_ref) {
+  var doc = _ref.doc,
+    codeBidiWarningLabel = _ref.codeBidiWarningLabel,
+    tooltipEnabled = _ref.tooltipEnabled;
+  var bidiCharactersAndTheirPositions = [];
+  doc.descendants(function (node, pos) {
+    var isTextWithCodeMark = node.type.name === 'text' && node.marks && node.marks.some(function (mark) {
+      return mark.type.name === 'code';
+    });
+    if (isTextWithCodeMark) {
+      (0, _bidiWarningDecorator.default)(node.textContent, function (_ref2) {
+        var bidiCharacter = _ref2.bidiCharacter,
+          index = _ref2.index;
+        bidiCharactersAndTheirPositions.push({
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          position: pos + index,
+          bidiCharacter: bidiCharacter
+        });
+      });
+      return false;
+    }
+    var isCodeBlock = node.type.name === 'codeBlock';
+    if (isCodeBlock) {
+      (0, _bidiWarningDecorator.default)(node.textContent, function (_ref3) {
+        var bidiCharacter = _ref3.bidiCharacter,
+          index = _ref3.index;
+        bidiCharactersAndTheirPositions.push({
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          position: pos + index + 1,
+          bidiCharacter: bidiCharacter
+        });
+      });
+    }
+  });
+
+  // Bidi characters are not expected to commonly appear in code snippets, so recreating the decoration set
+  // for documents rather than reusing existing decorations seems a reasonable performance/complexity tradeoff.
+
+  if (bidiCharactersAndTheirPositions.length === 0) {
+    return _view.DecorationSet.empty;
+  }
+  var newBidiWarningsDecorationSet = _view.DecorationSet.create(doc, bidiCharactersAndTheirPositions.map(function (_ref4) {
+    var position = _ref4.position,
+      bidiCharacter = _ref4.bidiCharacter;
+    return _view.Decoration.widget(position, function (el) {
+      return renderDOM(bidiCharacter, codeBidiWarningLabel, tooltipEnabled);
+    }, {
+      destroy: function destroy(el) {
+        if (!(el instanceof HTMLElement)) {
+          throw new Error('Code Bidi Warning DOM spec did not return an HTMLElement');
+        }
+        el.remove();
+      }
+    });
+  }));
+  return newBidiWarningsDecorationSet;
+}
+function renderDOM(bidiCharacter, codeBidiWarningLabel, tooltipEnabled) {
+  var spec = (0, _codeBidiWarningDomSpec.getCodeBidiWarningDomSpec)(bidiCharacter, codeBidiWarningLabel, tooltipEnabled);
+  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, spec),
+    dom = _DOMSerializer$render.dom;
+  if (!(dom instanceof HTMLElement)) {
+    throw new Error('Code Bidi Warning DOM spec did not return an HTMLElement');
+  }
+  return dom;
+}

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

@@ -0,0 +1,26 @@
+export function getCodeBidiWarningDomSpec(bidiCharacter, codeBidiWarningLabel, tooltipEnabled) {
+  var _bidiCharacter$codePo, _bidiCharacter$codePo2;
+  const bidiCharacterCode = `U+${(_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : (_bidiCharacter$codePo2 = _bidiCharacter$codePo.toString(16)) === null || _bidiCharacter$codePo2 === void 0 ? void 0 : _bidiCharacter$codePo2.toUpperCase()}`;
+  return ['span', {
+    'data-prosemirror-node-name': 'code-bidi-warning',
+    dir: 'ltr'
+  },
+  // Code Bidi Warning Decorator
+  ['span', {
+    'data-bidi-component': 'code-bidi-warning-decorator',
+    'data-testid': 'code-bidi-warning-decorator',
+    'data-bidi-character-code': bidiCharacterCode,
+    role: 'mark'
+  },
+  // Mark the < and > characters as visually hidden for screen readers
+  ['span', {
+    'aria-hidden': 'true'
+  }, '<'], bidiCharacterCode, ['span', {
+    'aria-hidden': 'true'
+  }, '>']],
+  // Code Bidi Warning Tooltip
+  ...(tooltipEnabled ? [['span', {
+    'data-bidi-component': 'code-bidi-warning-tooltip',
+    role: 'tooltip'
+  }, codeBidiWarningLabel]] : [])];
+}

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

@@ -1,7 +1,9 @@
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { createBidiWarningsDecorationSetFromDoc, pluginFactoryCreator } from './plugin-factory';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { codeBidiWarningPluginKey } from './plugin-key';
+import { createBidiWarningsDecorationSetFromDoc as reactCreateBidiWarningsDecorationSetFromDoc, pluginFactoryCreator as reactPluginFactoryCreator } from './react-plugin-factory';
+import { createBidiWarningsDecorationSetFromDoc as vanillaCreateBidiWarningsDecorationSetFromDoc, pluginFactoryCreator as vanillaPluginFactoryCreator } from './vanilla-plugin-factory';
 export const createPlugin = ({
   dispatch,
   getIntl,
@@ -14,12 +16,16 @@ export const createPlugin = ({
   const {
     createPluginState,
     getPluginState
-  } = pluginFactoryCreator(nodeViewPortalProviderAPI);
+  } = fg('platform_editor_vanilla_codebidi_warning') ? vanillaPluginFactoryCreator() : reactPluginFactoryCreator(nodeViewPortalProviderAPI);
   return new SafePlugin({
     key: codeBidiWarningPluginKey,
     state: createPluginState(dispatch, state => {
       return {
-        decorationSet: createBidiWarningsDecorationSetFromDoc({
+        decorationSet: fg('platform_editor_vanilla_codebidi_warning') ? vanillaCreateBidiWarningsDecorationSetFromDoc({
+          doc: state.doc,
+          codeBidiWarningLabel,
+          tooltipEnabled: true
+        }) : reactCreateBidiWarningsDecorationSetFromDoc({
           doc: state.doc,
           codeBidiWarningLabel,
           tooltipEnabled: true,

package/dist/es2019/pm-plugins/vanilla-plugin-factory.js

@@ -0,0 +1,92 @@
+import codeBidiWarningDecorator from '@atlaskit/code/bidi-warning-decorator';
+import { pluginFactory, stepHasSlice } from '@atlaskit/editor-common/utils';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getCodeBidiWarningDomSpec } from './codeBidiWarningDomSpec';
+import { codeBidiWarningPluginKey } from './plugin-key';
+import reducer from './reducer';
+export const pluginFactoryCreator = () => pluginFactory(codeBidiWarningPluginKey, reducer, {
+  onDocChanged: (tr, pluginState) => {
+    if (!tr.steps.find(stepHasSlice)) {
+      return pluginState;
+    }
+    const newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
+      doc: tr.doc,
+      codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
+      tooltipEnabled: pluginState.tooltipEnabled
+    });
+    return {
+      ...pluginState,
+      decorationSet: newBidiWarningsDecorationSet
+    };
+  }
+});
+export function createBidiWarningsDecorationSetFromDoc({
+  doc,
+  codeBidiWarningLabel,
+  tooltipEnabled
+}) {
+  const bidiCharactersAndTheirPositions = [];
+  doc.descendants((node, pos) => {
+    const isTextWithCodeMark = node.type.name === 'text' && node.marks && node.marks.some(mark => mark.type.name === 'code');
+    if (isTextWithCodeMark) {
+      codeBidiWarningDecorator(node.textContent, ({
+        bidiCharacter,
+        index
+      }) => {
+        bidiCharactersAndTheirPositions.push({
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          position: pos + index,
+          bidiCharacter
+        });
+      });
+      return false;
+    }
+    const isCodeBlock = node.type.name === 'codeBlock';
+    if (isCodeBlock) {
+      codeBidiWarningDecorator(node.textContent, ({
+        bidiCharacter,
+        index
+      }) => {
+        bidiCharactersAndTheirPositions.push({
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          position: pos + index + 1,
+          bidiCharacter
+        });
+      });
+    }
+  });
+
+  // Bidi characters are not expected to commonly appear in code snippets, so recreating the decoration set
+  // for documents rather than reusing existing decorations seems a reasonable performance/complexity tradeoff.
+
+  if (bidiCharactersAndTheirPositions.length === 0) {
+    return DecorationSet.empty;
+  }
+  const newBidiWarningsDecorationSet = DecorationSet.create(doc, bidiCharactersAndTheirPositions.map(({
+    position,
+    bidiCharacter
+  }) => {
+    return Decoration.widget(position, el => renderDOM(bidiCharacter, codeBidiWarningLabel, tooltipEnabled), {
+      destroy: el => {
+        if (!(el instanceof HTMLElement)) {
+          throw new Error('Code Bidi Warning DOM spec did not return an HTMLElement');
+        }
+        el.remove();
+      }
+    });
+  }));
+  return newBidiWarningsDecorationSet;
+}
+function renderDOM(bidiCharacter, codeBidiWarningLabel, tooltipEnabled) {
+  const spec = getCodeBidiWarningDomSpec(bidiCharacter, codeBidiWarningLabel, tooltipEnabled);
+  const {
+    dom
+  } = DOMSerializer.renderSpec(document, spec);
+  if (!(dom instanceof HTMLElement)) {
+    throw new Error('Code Bidi Warning DOM spec did not return an HTMLElement');
+  }
+  return dom;
+}

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

@@ -0,0 +1,25 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+export function getCodeBidiWarningDomSpec(bidiCharacter, codeBidiWarningLabel, tooltipEnabled) {
+  var _bidiCharacter$codePo;
+  var bidiCharacterCode = "U+".concat((_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 || (_bidiCharacter$codePo = _bidiCharacter$codePo.toString(16)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toUpperCase());
+  return ['span', {
+    'data-prosemirror-node-name': 'code-bidi-warning',
+    dir: 'ltr'
+  },
+  // Code Bidi Warning Decorator
+  ['span', {
+    'data-bidi-component': 'code-bidi-warning-decorator',
+    'data-testid': 'code-bidi-warning-decorator',
+    'data-bidi-character-code': bidiCharacterCode,
+    role: 'mark'
+  },
+  // Mark the < and > characters as visually hidden for screen readers
+  ['span', {
+    'aria-hidden': 'true'
+  }, '<'], bidiCharacterCode, ['span', {
+    'aria-hidden': 'true'
+  }, '>']]].concat(_toConsumableArray(tooltipEnabled ? [['span', {
+    'data-bidi-component': 'code-bidi-warning-tooltip',
+    role: 'tooltip'
+  }, codeBidiWarningLabel]] : []));
+}

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

@@ -1,7 +1,9 @@
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { createBidiWarningsDecorationSetFromDoc, pluginFactoryCreator } from './plugin-factory';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { codeBidiWarningPluginKey } from './plugin-key';
+import { createBidiWarningsDecorationSetFromDoc as reactCreateBidiWarningsDecorationSetFromDoc, pluginFactoryCreator as reactPluginFactoryCreator } from './react-plugin-factory';
+import { createBidiWarningsDecorationSetFromDoc as vanillaCreateBidiWarningsDecorationSetFromDoc, pluginFactoryCreator as vanillaPluginFactoryCreator } from './vanilla-plugin-factory';
 export var createPlugin = function createPlugin(_ref, _ref2) {
   var dispatch = _ref.dispatch,
     getIntl = _ref.getIntl,
@@ -9,14 +11,18 @@ export var createPlugin = function createPlugin(_ref, _ref2) {
   var appearance = _ref2.appearance;
   var intl = getIntl();
   var codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
-  var _pluginFactoryCreator = pluginFactoryCreator(nodeViewPortalProviderAPI),
-    createPluginState = _pluginFactoryCreator.createPluginState,
-    getPluginState = _pluginFactoryCreator.getPluginState;
+  var _ref3 = fg('platform_editor_vanilla_codebidi_warning') ? vanillaPluginFactoryCreator() : reactPluginFactoryCreator(nodeViewPortalProviderAPI),
+    createPluginState = _ref3.createPluginState,
+    getPluginState = _ref3.getPluginState;
   return new SafePlugin({
     key: codeBidiWarningPluginKey,
     state: createPluginState(dispatch, function (state) {
       return {
-        decorationSet: createBidiWarningsDecorationSetFromDoc({
+        decorationSet: fg('platform_editor_vanilla_codebidi_warning') ? vanillaCreateBidiWarningsDecorationSetFromDoc({
+          doc: state.doc,
+          codeBidiWarningLabel: codeBidiWarningLabel,
+          tooltipEnabled: true
+        }) : reactCreateBidiWarningsDecorationSetFromDoc({
           doc: state.doc,
           codeBidiWarningLabel: codeBidiWarningLabel,
           tooltipEnabled: true,

package/dist/esm/pm-plugins/vanilla-plugin-factory.js

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import codeBidiWarningDecorator from '@atlaskit/code/bidi-warning-decorator';
+import { pluginFactory, stepHasSlice } from '@atlaskit/editor-common/utils';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getCodeBidiWarningDomSpec } from './codeBidiWarningDomSpec';
+import { codeBidiWarningPluginKey } from './plugin-key';
+import reducer from './reducer';
+export var pluginFactoryCreator = function pluginFactoryCreator() {
+  return pluginFactory(codeBidiWarningPluginKey, reducer, {
+    onDocChanged: function onDocChanged(tr, pluginState) {
+      if (!tr.steps.find(stepHasSlice)) {
+        return pluginState;
+      }
+      var newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
+        doc: tr.doc,
+        codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
+        tooltipEnabled: pluginState.tooltipEnabled
+      });
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        decorationSet: newBidiWarningsDecorationSet
+      });
+    }
+  });
+};
+export function createBidiWarningsDecorationSetFromDoc(_ref) {
+  var doc = _ref.doc,
+    codeBidiWarningLabel = _ref.codeBidiWarningLabel,
+    tooltipEnabled = _ref.tooltipEnabled;
+  var bidiCharactersAndTheirPositions = [];
+  doc.descendants(function (node, pos) {
+    var isTextWithCodeMark = node.type.name === 'text' && node.marks && node.marks.some(function (mark) {
+      return mark.type.name === 'code';
+    });
+    if (isTextWithCodeMark) {
+      codeBidiWarningDecorator(node.textContent, function (_ref2) {
+        var bidiCharacter = _ref2.bidiCharacter,
+          index = _ref2.index;
+        bidiCharactersAndTheirPositions.push({
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          position: pos + index,
+          bidiCharacter: bidiCharacter
+        });
+      });
+      return false;
+    }
+    var isCodeBlock = node.type.name === 'codeBlock';
+    if (isCodeBlock) {
+      codeBidiWarningDecorator(node.textContent, function (_ref3) {
+        var bidiCharacter = _ref3.bidiCharacter,
+          index = _ref3.index;
+        bidiCharactersAndTheirPositions.push({
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          position: pos + index + 1,
+          bidiCharacter: bidiCharacter
+        });
+      });
+    }
+  });
+
+  // Bidi characters are not expected to commonly appear in code snippets, so recreating the decoration set
+  // for documents rather than reusing existing decorations seems a reasonable performance/complexity tradeoff.
+
+  if (bidiCharactersAndTheirPositions.length === 0) {
+    return DecorationSet.empty;
+  }
+  var newBidiWarningsDecorationSet = DecorationSet.create(doc, bidiCharactersAndTheirPositions.map(function (_ref4) {
+    var position = _ref4.position,
+      bidiCharacter = _ref4.bidiCharacter;
+    return Decoration.widget(position, function (el) {
+      return renderDOM(bidiCharacter, codeBidiWarningLabel, tooltipEnabled);
+    }, {
+      destroy: function destroy(el) {
+        if (!(el instanceof HTMLElement)) {
+          throw new Error('Code Bidi Warning DOM spec did not return an HTMLElement');
+        }
+        el.remove();
+      }
+    });
+  }));
+  return newBidiWarningsDecorationSet;
+}
+function renderDOM(bidiCharacter, codeBidiWarningLabel, tooltipEnabled) {
+  var spec = getCodeBidiWarningDomSpec(bidiCharacter, codeBidiWarningLabel, tooltipEnabled);
+  var _DOMSerializer$render = DOMSerializer.renderSpec(document, spec),
+    dom = _DOMSerializer$render.dom;
+  if (!(dom instanceof HTMLElement)) {
+    throw new Error('Code Bidi Warning DOM spec did not return an HTMLElement');
+  }
+  return dom;
+}

package/dist/types/pm-plugins/codeBidiWarningDomSpec.d.ts

@@ -0,0 +1,2 @@
+import { type DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+export declare function getCodeBidiWarningDomSpec(bidiCharacter: string, codeBidiWarningLabel: string, tooltipEnabled: boolean): DOMOutputSpec;

package/dist/types/pm-plugins/vanilla-plugin-factory.d.ts

@@ -0,0 +1,12 @@
+import { type Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const pluginFactoryCreator: () => {
+    createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: import("./types").CodeBidiWarningPluginState | ((state: import("prosemirror-state").EditorState) => import("./types").CodeBidiWarningPluginState)) => import("prosemirror-state").SafeStateField<import("./types").CodeBidiWarningPluginState>;
+    createCommand: <A = unknown>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
+    getPluginState: (state: import("prosemirror-state").EditorState) => import("./types").CodeBidiWarningPluginState;
+};
+export declare function createBidiWarningsDecorationSetFromDoc({ doc, codeBidiWarningLabel, tooltipEnabled, }: {
+    doc: PmNode;
+    codeBidiWarningLabel: string;
+    tooltipEnabled: boolean;
+}): DecorationSet;

package/dist/types-ts4.5/pm-plugins/codeBidiWarningDomSpec.d.ts

@@ -0,0 +1,2 @@
+import { type DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+export declare function getCodeBidiWarningDomSpec(bidiCharacter: string, codeBidiWarningLabel: string, tooltipEnabled: boolean): DOMOutputSpec;

package/dist/types-ts4.5/pm-plugins/vanilla-plugin-factory.d.ts

@@ -0,0 +1,12 @@
+import { type Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const pluginFactoryCreator: () => {
+    createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: import("./types").CodeBidiWarningPluginState | ((state: import("prosemirror-state").EditorState) => import("./types").CodeBidiWarningPluginState)) => import("prosemirror-state").SafeStateField<import("./types").CodeBidiWarningPluginState>;
+    createCommand: <A = unknown>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
+    getPluginState: (state: import("prosemirror-state").EditorState) => import("./types").CodeBidiWarningPluginState;
+};
+export declare function createBidiWarningsDecorationSetFromDoc({ doc, codeBidiWarningLabel, tooltipEnabled, }: {
+    doc: PmNode;
+    codeBidiWarningLabel: string;
+    tooltipEnabled: boolean;
+}): DecorationSet;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-bidi-warning",
-	"version": "2.1.3",
+	"version": "2.2.0",
 	"description": "Code bidi warning plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -9,8 +9,7 @@
 	},
 	"atlassian": {
 		"team": "Editor: Core Experiences",
-		"singleton": true,
-		"runReact18": true
+		"singleton": true
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",
@@ -32,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/editor-common": "^106.0.0",
+		"@atlaskit/editor-common": "^107.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -86,5 +85,10 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_vanilla_codebidi_warning": {
+			"type": "boolean"
+		}
 	}
 }