@atlaskit/editor-plugin-code-block 3.3.8 → 3.3.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.10
+
+### Patch Changes
+
+- [`cbe3b04ebb0b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cbe3b04ebb0b6) -
+  ED-24730 - Address bug where word wrap decorator broke on drag and drop. Required some refactoring
+  of decoration functions for code block. Moved all of them to decorators.ts and added unit tests.
+
+## 3.3.9
+
+### Patch Changes
+
+- [#134918](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134918)
+  [`89e5820ef3ed5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89e5820ef3ed5) -
+  [ux] ED-24678 adding a11y support for code block
+
 ## 3.3.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/code-block.js

@@ -17,7 +17,7 @@ var _actions = require("../actions");
 var _mainState = require("../pm-plugins/main-state");
 var _classNames = require("../ui/class-names");
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable) {
+var toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -34,17 +34,19 @@ var toDOM = function toDOM(node, contentEditable) {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
     contenteditable: (0, _platformFeatureFlags.fg)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
-    'data-testid': 'code-block--code'
+    'data-testid': 'code-block--code',
+    'aria-label': formattedAriaLabel
   }, 0]]], ['div', {
     class: _classNames.codeBlockClassNames.end,
     contenteditable: 'false'
   }]];
 };
 var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     (0, _classCallCheck2.default)(this, CodeBlockView);
+    (0, _defineProperty2.default)(this, "formattedAriaLabel", '');
     (0, _defineProperty2.default)(this, "ensureLineNumbers", (0, _rafSchd.default)(function () {
       var lines = 1;
       _this.node.forEach(function (node) {
@@ -75,7 +77,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
       _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
     });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
-    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled), formattedAriaLabel)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -87,6 +89,12 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.api = api;
     if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
       this.maintainDynamicGutterSize();
+
+      // Ensure the code block node has a wrapped state.
+      // Wrapped state may already exist from breakout's recreating the node.
+      if (!_codeBlock.codeBlockWrappedStates.has(_node)) {
+        _codeBlock.codeBlockWrappedStates.set(_node, _codeBlock.defaultWordWrapState);
+      }
     } else {
       this.ensureLineNumbers();
     }
@@ -199,6 +207,6 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
-  return new CodeBlockView(node, view, getPos, api);
+var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, formattedAriaLabel, api) {
+  return new CodeBlockView(node, view, getPos, formattedAriaLabel, api);
 };

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

@@ -4,14 +4,65 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateLineAttributesFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = exports.DECORATION_WIDGET_TYPE = void 0;
+exports.validateWordWrappedDecorators = exports.updateDecorationSetWithWordWrappedDecorator = exports.updateDecorationSetWithLineNumberDecorators = exports.updateCodeBlockDecorations = exports.getWordWrapDecoratorsFromNodePos = exports.generateLineAttributesFromNode = exports.generateInitialDecorations = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = exports.DECORATION_WRAPPED_BLOCK_NODE_TYPE = exports.DECORATION_WIDGET_TYPE = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _classNames = require("../ui/class-names");
+var _utils = require("../utils");
 var DECORATION_WIDGET_TYPE = exports.DECORATION_WIDGET_TYPE = 'decorationWidgetType';
-var generateLineAttributesFromNode = exports.generateLineAttributesFromNode = function generateLineAttributesFromNode(pos, node) {
+var DECORATION_WRAPPED_BLOCK_NODE_TYPE = exports.DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
+
+/**
+ * Generate the initial decorations for the code block.
+ */
+var generateInitialDecorations = exports.generateInitialDecorations = function generateInitialDecorations(state) {
+  var codeBlockNodes = (0, _utils.getAllCodeBlockNodesInDoc)(state);
+  return codeBlockNodes.flatMap(function (node) {
+    return createLineNumbersDecorations(node);
+  });
+};
+
+/**
+ * Update all the decorations used by the code block.
+ */
+var updateCodeBlockDecorations = exports.updateCodeBlockDecorations = function updateCodeBlockDecorations(tr, state, decorationSet) {
+  var updatedDecorationSet = decorationSet;
+  var codeBlockNodes = (0, _utils.getAllCodeBlockNodesInDoc)(state);
+
+  // All the line numbers decorators are refreshed on doc change.
+  updatedDecorationSet = updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, updatedDecorationSet);
+
+  // Check to make sure the word wrap decorators are still valid.
+  updatedDecorationSet = validateWordWrappedDecorators(tr, codeBlockNodes, updatedDecorationSet);
+  return updatedDecorationSet;
+};
+
+/**
+ * Update the decorations set with the line number decorators.
+ */
+var updateDecorationSetWithLineNumberDecorators = exports.updateDecorationSetWithLineNumberDecorators = function updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, decorationSet) {
+  var updatedDecorationSet = decorationSet;
+  // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+  var children = updatedDecorationSet.find(undefined, undefined, function (spec) {
+    return spec.type === DECORATION_WIDGET_TYPE;
+  });
+  updatedDecorationSet = updatedDecorationSet.remove(children);
+
+  // regenerate all the line number for the documents code blocks
+  var lineNumberDecorators = [];
+  codeBlockNodes.forEach(function (node) {
+    lineNumberDecorators.push.apply(lineNumberDecorators, (0, _toConsumableArray2.default)(createLineNumbersDecorations(node)));
+  });
+
+  // add the newly generated line numbers to the decorations set
+  return updatedDecorationSet.add(tr.doc, [].concat(lineNumberDecorators));
+};
+var generateLineAttributesFromNode = exports.generateLineAttributesFromNode = function generateLineAttributesFromNode(node) {
+  var innerNode = node.node,
+    pos = node.pos;
   // Get content node
-  var contentNode = node.content;
+  var contentNode = innerNode.content;
 
   // Get node text content
   var lineAttributes = [];
@@ -64,6 +115,60 @@ var createDecorationSetFromLineAttributes = exports.createDecorationSetFromLineA
   });
   return widgetDecorations;
 };
-var createLineNumbersDecorations = exports.createLineNumbersDecorations = function createLineNumbersDecorations(pos, node) {
-  return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(pos, node));
+var createLineNumbersDecorations = exports.createLineNumbersDecorations = function createLineNumbersDecorations(node) {
+  return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node));
+};
+
+/**
+ * There are edge cases like when a user drags and drops a code block node where the decorator breaks and no longer reflects
+ * the correct word wrap state. This function validates that the decorator and the state are in line, otherwise it will
+ * retrigger the logic to apply the word wrap decorator.
+ */
+var validateWordWrappedDecorators = exports.validateWordWrappedDecorators = function validateWordWrappedDecorators(tr, codeBlockNodes, decorationSet) {
+  var updatedDecorationSet = decorationSet;
+  codeBlockNodes.forEach(function (node) {
+    var isCodeBlockWrappedInState = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node.node);
+    var isCodeBlockWrappedByDecorator = getWordWrapDecoratorsFromNodePos(node.pos, decorationSet).length !== 0;
+    if (isCodeBlockWrappedInState && !isCodeBlockWrappedByDecorator) {
+      updatedDecorationSet = updateDecorationSetWithWordWrappedDecorator(decorationSet, tr, node);
+    }
+  });
+  return updatedDecorationSet;
+};
+
+/**
+ * Update the decoration set with the word wrap decorator.
+ */
+var updateDecorationSetWithWordWrappedDecorator = exports.updateDecorationSetWithWordWrappedDecorator = function updateDecorationSetWithWordWrappedDecorator(decorationSet, tr, node) {
+  if (!node || node.pos === undefined) {
+    return decorationSet;
+  }
+  var updatedDecorationSet = decorationSet;
+  var pos = node.pos,
+    innerNode = node.node;
+  var isNodeWrapped = (0, _codeBlock.isCodeBlockWordWrapEnabled)(innerNode);
+  if (!isNodeWrapped) {
+    var currentWrappedBlockDecorationSet = getWordWrapDecoratorsFromNodePos(pos, updatedDecorationSet);
+    updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
+  } else {
+    var wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {
+      class: _classNames.codeBlockClassNames.contentFgWrapped
+    }, {
+      type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+    } // Allows for quick filtering of decorations while using `find`
+    );
+    updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+  }
+  return updatedDecorationSet;
+};
+
+/**
+ * Get the word wrap decorators for the given node position.
+ */
+var getWordWrapDecoratorsFromNodePos = exports.getWordWrapDecoratorsFromNodePos = function getWordWrapDecoratorsFromNodePos(pos, decorationSet) {
+  var codeBlockNodePosition = pos + 1; // We need to add 1 to the position to get the start of the node.
+  var currentWrappedBlockDecorationSet = decorationSet.find(codeBlockNodePosition, codeBlockNodePosition, function (spec) {
+    return spec.type === DECORATION_WRAPPED_BLOCK_NODE_TYPE;
+  });
+  return currentWrappedBlockDecorationSet;
 };

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

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _codeBlock = require("@atlaskit/editor-common/code-block");
+var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -15,7 +14,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("../actions");
-var _codeBlock2 = require("../nodeviews/code-block");
+var _codeBlock = require("../nodeviews/code-block");
 var _pluginKey = require("../plugin-key");
 var _classNames = require("../ui/class-names");
 var _utils2 = require("../utils");
@@ -23,7 +22,6 @@ var _actions2 = require("./actions");
 var _decorators = require("./decorators");
 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 DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 var createPlugin = exports.createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
     useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
@@ -32,57 +30,6 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
     api = _ref.api;
   var handleDOMEvents = {};
-  var createLineNumberDecoratorsFromDecendants = function createLineNumberDecoratorsFromDecendants(editorState) {
-    var lineNumberDecorators = [];
-    editorState.doc.descendants(function (node, pos) {
-      if (node.type === editorState.schema.nodes.codeBlock) {
-        lineNumberDecorators.push.apply(lineNumberDecorators, (0, _toConsumableArray2.default)((0, _decorators.createLineNumbersDecorations)(pos, node)));
-        return false;
-      }
-      return true;
-    });
-    return lineNumberDecorators;
-  };
-  var createWordWrappedDecoratorPluginState = function createWordWrappedDecoratorPluginState(pluginState, tr, node) {
-    var decorationSetFromState = pluginState.decorations;
-    if (node) {
-      var pos = node.pos,
-        innerNode = node.node;
-      if (pos !== undefined) {
-        var isNodeWrapped = (0, _codeBlock.isCodeBlockWordWrapEnabled)(innerNode);
-        if (!isNodeWrapped) {
-          // Restricts the range of decorators to the current node while not including the previous nodes position in range
-          var codeBlockNodePosition = pos + 1;
-          var currentWrappedBlockDecorationSet = decorationSetFromState.find(codeBlockNodePosition, codeBlockNodePosition, function (spec) {
-            return spec.type === DECORATION_WRAPPED_BLOCK_NODE_TYPE;
-          });
-          decorationSetFromState = decorationSetFromState.remove(currentWrappedBlockDecorationSet);
-        } else {
-          var wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {
-            class: _classNames.codeBlockClassNames.contentFgWrapped
-          }, {
-            type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
-          } // Allows for quick filtering of decorations while using `find`
-          );
-          decorationSetFromState = decorationSetFromState.add(tr.doc, [wrappedBlock]);
-        }
-      }
-    }
-    return decorationSetFromState;
-  };
-  var updateLineDecorationSet = function updateLineDecorationSet(tr, state, decorationSet) {
-    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
-    var children = decorationSet.find(undefined, undefined, function (spec) {
-      return spec.type === _decorators.DECORATION_WIDGET_TYPE;
-    });
-    decorationSet = decorationSet.remove(children);
-
-    // regenerate all the line number for the documents code blocks
-    var lineDecorators = createLineNumberDecoratorsFromDecendants(state);
-
-    // add the newly generated line numbers to the decorations set
-    return decorationSet.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
-  };
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
@@ -126,13 +73,13 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     state: {
       init: function init(_, state) {
         var node = (0, _utils2.findCodeBlock)(state, state.selection);
-        var lineNumberDecorators = (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
+        var initialDecorations = (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? (0, _decorators.generateInitialDecorations)(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: _view.DecorationSet.create(state.doc, lineNumberDecorators)
+          decorations: _view.DecorationSet.create(state.doc, initialDecorations)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -140,18 +87,18 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions2.ACTIONS.SET_IS_WRAPPED && (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
           var node = (0, _utils2.findCodeBlock)(newState, tr.selection);
           return _objectSpread(_objectSpread({}, pluginState), {}, {
-            decorations: createWordWrappedDecoratorPluginState(pluginState, tr, node)
+            decorations: (0, _decorators.updateDecorationSetWithWordWrappedDecorator)(pluginState.decorations, tr, node)
           });
         }
         if (tr.docChanged) {
           var _node = (0, _utils2.findCodeBlock)(newState, tr.selection);
 
           // Updates mapping position of all existing decorations to new positions
-          // specifically used for updating word wrap node decorators
+          // specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
           var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
-
-          // Wipe and regenerate all line numbers in the document
-          updatedDecorationSet = updateLineDecorationSet(tr, newState, updatedDecorationSet);
+          if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+            updatedDecorationSet = (0, _decorators.updateCodeBlockDecorations)(tr, newState, updatedDecorationSet);
+          }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof _state.NodeSelection,
@@ -189,7 +136,10 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
       },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return (0, _codeBlock2.codeBlockNodeView)(node, view, getPos, api);
+          var _getIntl = getIntl(),
+            formatMessage = _getIntl.formatMessage;
+          var formattedAriaLabel = formatMessage(_messages.blockTypeMessages.codeblock);
+          return (0, _codeBlock.codeBlockNodeView)(node, view, getPos, formattedAriaLabel, api);
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {

package/dist/cjs/toolbar.js

@@ -109,7 +109,6 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       supportsViewMode: true,
       icon: _WrapIcon.WrapIcon,
       onClick: (0, _actions.toggleWordWrapStateForCodeBlockNode)(editorAnalyticsAPI),
-      // Hooking up here for demo purposes. To be revisited with ED-24222.
       title: isWrapped ? formatMessage(_messages.codeBlockButtonMessages.unwrapCode) : formatMessage(_messages.codeBlockButtonMessages.wrapCode),
       tabIndex: null,
       selected: isWrapped

package/dist/cjs/utils.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "findCodeBlock", {
     return _transforms.findCodeBlock;
   }
 });
+exports.getAllCodeBlockNodesInDoc = getAllCodeBlockNodesInDoc;
 exports.getCursor = getCursor;
 Object.defineProperty(exports, "transformSingleLineCodeBlockToCodeMark", {
   enumerable: true,
@@ -25,4 +26,18 @@ Object.defineProperty(exports, "transformSliceToJoinAdjacentCodeBlocks", {
 var _transforms = require("@atlaskit/editor-common/transforms");
 function getCursor(selection) {
   return selection.$cursor || undefined;
+}
+function getAllCodeBlockNodesInDoc(state) {
+  var codeBlockNodes = [];
+  state.doc.descendants(function (node, pos) {
+    if (node.type === state.schema.nodes.codeBlock) {
+      codeBlockNodes.push({
+        node: node,
+        pos: pos
+      });
+      return false;
+    }
+    return true;
+  });
+  return codeBlockNodes;
 }

package/dist/es2019/nodeviews/code-block.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
-import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
+import { codeBlockWrappedStates, defaultWordWrapState, transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { browser } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -8,7 +8,7 @@ import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 const MATCH_NEWLINES = new RegExp('\n', 'g');
-const toDOM = (node, contentEditable) => ['div', {
+const toDOM = (node, contentEditable, formattedAriaLabel) => ['div', {
   class: 'code-block'
 }, ['div', {
   class: codeBlockClassNames.start,
@@ -24,14 +24,16 @@ const toDOM = (node, contentEditable) => ['div', {
   'data-language': node.attrs.language || '',
   spellcheck: 'false',
   contenteditable: fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
-  'data-testid': 'code-block--code'
+  'data-testid': 'code-block--code',
+  'aria-label': formattedAriaLabel
 }, 0]]], ['div', {
   class: codeBlockClassNames.end,
   contenteditable: 'false'
 }]];
 export class CodeBlockView {
-  constructor(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  constructor(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
     var _api$editorDisabled, _api$editorDisabled$s;
+    _defineProperty(this, "formattedAriaLabel", '');
     _defineProperty(this, "ensureLineNumbers", rafSchedule(() => {
       let lines = 1;
       this.node.forEach(node => {
@@ -65,7 +67,7 @@ export class CodeBlockView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled)));
+    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled), formattedAriaLabel));
     this.getPos = getPos;
     this.view = view;
     this.node = _node;
@@ -75,6 +77,12 @@ export class CodeBlockView {
     this.api = api;
     if (fg('editor_support_code_block_wrapping')) {
       this.maintainDynamicGutterSize();
+
+      // Ensure the code block node has a wrapped state.
+      // Wrapped state may already exist from breakout's recreating the node.
+      if (!codeBlockWrappedStates.has(_node)) {
+        codeBlockWrappedStates.set(_node, defaultWordWrapState);
+      }
     } else {
       this.ensureLineNumbers();
     }
@@ -170,4 +178,4 @@ export class CodeBlockView {
     this.cleanupEditorDisabledListener = undefined;
   }
 }
-export const codeBlockNodeView = (node, view, getPos, api) => new CodeBlockView(node, view, getPos, api);
+export const codeBlockNodeView = (node, view, getPos, formattedAriaLabel, api) => new CodeBlockView(node, view, getPos, formattedAriaLabel, api);

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

@@ -1,9 +1,58 @@
+import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
+import { getAllCodeBlockNodesInDoc } from '../utils';
 export const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
-export const generateLineAttributesFromNode = (pos, node) => {
+export const DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
+
+/**
+ * Generate the initial decorations for the code block.
+ */
+export const generateInitialDecorations = state => {
+  const codeBlockNodes = getAllCodeBlockNodesInDoc(state);
+  return codeBlockNodes.flatMap(node => createLineNumbersDecorations(node));
+};
+
+/**
+ * Update all the decorations used by the code block.
+ */
+export const updateCodeBlockDecorations = (tr, state, decorationSet) => {
+  let updatedDecorationSet = decorationSet;
+  const codeBlockNodes = getAllCodeBlockNodesInDoc(state);
+
+  // All the line numbers decorators are refreshed on doc change.
+  updatedDecorationSet = updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, updatedDecorationSet);
+
+  // Check to make sure the word wrap decorators are still valid.
+  updatedDecorationSet = validateWordWrappedDecorators(tr, codeBlockNodes, updatedDecorationSet);
+  return updatedDecorationSet;
+};
+
+/**
+ * Update the decorations set with the line number decorators.
+ */
+export const updateDecorationSetWithLineNumberDecorators = (tr, codeBlockNodes, decorationSet) => {
+  let updatedDecorationSet = decorationSet;
+  // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+  const children = updatedDecorationSet.find(undefined, undefined, spec => spec.type === DECORATION_WIDGET_TYPE);
+  updatedDecorationSet = updatedDecorationSet.remove(children);
+
+  // regenerate all the line number for the documents code blocks
+  const lineNumberDecorators = [];
+  codeBlockNodes.forEach(node => {
+    lineNumberDecorators.push(...createLineNumbersDecorations(node));
+  });
+
+  // add the newly generated line numbers to the decorations set
+  return updatedDecorationSet.add(tr.doc, [...lineNumberDecorators]);
+};
+export const generateLineAttributesFromNode = node => {
+  const {
+    node: innerNode,
+    pos
+  } = node;
   // Get content node
-  const contentNode = node.content;
+  const contentNode = innerNode.content;
 
   // Get node text content
   let lineAttributes = [];
@@ -58,4 +107,58 @@ export const createDecorationSetFromLineAttributes = lineAttributes => {
   });
   return widgetDecorations;
 };
-export const createLineNumbersDecorations = (pos, node) => createDecorationSetFromLineAttributes(generateLineAttributesFromNode(pos, node));
+export const createLineNumbersDecorations = node => createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node));
+
+/**
+ * There are edge cases like when a user drags and drops a code block node where the decorator breaks and no longer reflects
+ * the correct word wrap state. This function validates that the decorator and the state are in line, otherwise it will
+ * retrigger the logic to apply the word wrap decorator.
+ */
+export const validateWordWrappedDecorators = (tr, codeBlockNodes, decorationSet) => {
+  let updatedDecorationSet = decorationSet;
+  codeBlockNodes.forEach(node => {
+    const isCodeBlockWrappedInState = isCodeBlockWordWrapEnabled(node.node);
+    const isCodeBlockWrappedByDecorator = getWordWrapDecoratorsFromNodePos(node.pos, decorationSet).length !== 0;
+    if (isCodeBlockWrappedInState && !isCodeBlockWrappedByDecorator) {
+      updatedDecorationSet = updateDecorationSetWithWordWrappedDecorator(decorationSet, tr, node);
+    }
+  });
+  return updatedDecorationSet;
+};
+
+/**
+ * Update the decoration set with the word wrap decorator.
+ */
+export const updateDecorationSetWithWordWrappedDecorator = (decorationSet, tr, node) => {
+  if (!node || node.pos === undefined) {
+    return decorationSet;
+  }
+  let updatedDecorationSet = decorationSet;
+  const {
+    pos,
+    node: innerNode
+  } = node;
+  const isNodeWrapped = isCodeBlockWordWrapEnabled(innerNode);
+  if (!isNodeWrapped) {
+    const currentWrappedBlockDecorationSet = getWordWrapDecoratorsFromNodePos(pos, updatedDecorationSet);
+    updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
+  } else {
+    const wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
+      class: codeBlockClassNames.contentFgWrapped
+    }, {
+      type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+    } // Allows for quick filtering of decorations while using `find`
+    );
+    updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+  }
+  return updatedDecorationSet;
+};
+
+/**
+ * Get the word wrap decorators for the given node position.
+ */
+export const getWordWrapDecoratorsFromNodePos = (pos, decorationSet) => {
+  const codeBlockNodePosition = pos + 1; // We need to add 1 to the position to get the start of the node.
+  const currentWrappedBlockDecorationSet = decorationSet.find(codeBlockNodePosition, codeBlockNodePosition, spec => spec.type === DECORATION_WRAPPED_BLOCK_NODE_TYPE);
+  return currentWrappedBlockDecorationSet;
+};

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

@@ -1,9 +1,9 @@
-import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { codeBlockNodeView } from '../nodeviews/code-block';
@@ -11,8 +11,7 @@ import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
-import { createLineNumbersDecorations, DECORATION_WIDGET_TYPE } from './decorators';
-const DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
+import { generateInitialDecorations, updateCodeBlockDecorations, updateDecorationSetWithWordWrappedDecorator } from './decorators';
 export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
@@ -20,55 +19,6 @@ export const createPlugin = ({
   api
 }) => {
   const handleDOMEvents = {};
-  const createLineNumberDecoratorsFromDecendants = editorState => {
-    let lineNumberDecorators = [];
-    editorState.doc.descendants((node, pos) => {
-      if (node.type === editorState.schema.nodes.codeBlock) {
-        lineNumberDecorators.push(...createLineNumbersDecorations(pos, node));
-        return false;
-      }
-      return true;
-    });
-    return lineNumberDecorators;
-  };
-  const createWordWrappedDecoratorPluginState = (pluginState, tr, node) => {
-    let decorationSetFromState = pluginState.decorations;
-    if (node) {
-      const {
-        pos,
-        node: innerNode
-      } = node;
-      if (pos !== undefined) {
-        const isNodeWrapped = isCodeBlockWordWrapEnabled(innerNode);
-        if (!isNodeWrapped) {
-          // Restricts the range of decorators to the current node while not including the previous nodes position in range
-          const codeBlockNodePosition = pos + 1;
-          const currentWrappedBlockDecorationSet = decorationSetFromState.find(codeBlockNodePosition, codeBlockNodePosition, spec => spec.type === DECORATION_WRAPPED_BLOCK_NODE_TYPE);
-          decorationSetFromState = decorationSetFromState.remove(currentWrappedBlockDecorationSet);
-        } else {
-          const wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
-            class: codeBlockClassNames.contentFgWrapped
-          }, {
-            type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
-          } // Allows for quick filtering of decorations while using `find`
-          );
-          decorationSetFromState = decorationSetFromState.add(tr.doc, [wrappedBlock]);
-        }
-      }
-    }
-    return decorationSetFromState;
-  };
-  const updateLineDecorationSet = (tr, state, decorationSet) => {
-    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
-    const children = decorationSet.find(undefined, undefined, spec => spec.type === DECORATION_WIDGET_TYPE);
-    decorationSet = decorationSet.remove(children);
-
-    // regenerate all the line number for the documents code blocks
-    const lineDecorators = createLineNumberDecoratorsFromDecendants(state);
-
-    // add the newly generated line numbers to the decorations set
-    return decorationSet.add(tr.doc, [...lineDecorators]);
-  };
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
@@ -110,13 +60,13 @@ export const createPlugin = ({
     state: {
       init(_, state) {
         const node = findCodeBlock(state, state.selection);
-        const lineNumberDecorators = fg('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
+        const initialDecorations = fg('editor_support_code_block_wrapping') ? generateInitialDecorations(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: DecorationSet.create(state.doc, lineNumberDecorators)
+          decorations: DecorationSet.create(state.doc, initialDecorations)
         };
       },
       apply(tr, pluginState, _oldState, newState) {
@@ -125,18 +75,18 @@ export const createPlugin = ({
           const node = findCodeBlock(newState, tr.selection);
           return {
             ...pluginState,
-            decorations: createWordWrappedDecoratorPluginState(pluginState, tr, node)
+            decorations: updateDecorationSetWithWordWrappedDecorator(pluginState.decorations, tr, node)
           };
         }
         if (tr.docChanged) {
           const node = findCodeBlock(newState, tr.selection);
 
           // Updates mapping position of all existing decorations to new positions
-          // specifically used for updating word wrap node decorators
+          // specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
           let updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
-
-          // Wipe and regenerate all line numbers in the document
-          updatedDecorationSet = updateLineDecorationSet(tr, newState, updatedDecorationSet);
+          if (fg('editor_support_code_block_wrapping')) {
+            updatedDecorationSet = updateCodeBlockDecorations(tr, newState, updatedDecorationSet);
+          }
           const newPluginState = {
             ...pluginState,
             pos: node ? node.pos : null,
@@ -177,7 +127,13 @@ export const createPlugin = ({
         return undefined;
       },
       nodeViews: {
-        codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api)
+        codeBlock: (node, view, getPos) => {
+          const {
+            formatMessage
+          } = getIntl();
+          const formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
+          return codeBlockNodeView(node, view, getPos, formattedAriaLabel, api);
+        }
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], target => fg('editor_support_code_block_wrapping') ? !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutterFg)) : !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection

package/dist/es2019/toolbar.js

@@ -90,7 +90,6 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
     supportsViewMode: true,
     icon: WrapIcon,
     onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
-    // Hooking up here for demo purposes. To be revisited with ED-24222.
     title: isWrapped ? formatMessage(codeBlockButtonMessages.unwrapCode) : formatMessage(codeBlockButtonMessages.wrapCode),
     tabIndex: null,
     selected: isWrapped

package/dist/es2019/utils.js

@@ -1,4 +1,18 @@
 export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '@atlaskit/editor-common/transforms';
 export function getCursor(selection) {
   return selection.$cursor || undefined;
+}
+export function getAllCodeBlockNodesInDoc(state) {
+  const codeBlockNodes = [];
+  state.doc.descendants((node, pos) => {
+    if (node.type === state.schema.nodes.codeBlock) {
+      codeBlockNodes.push({
+        node,
+        pos
+      });
+      return false;
+    }
+    return true;
+  });
+  return codeBlockNodes;
 }

package/dist/esm/nodeviews/code-block.js

@@ -2,7 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
-import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
+import { codeBlockWrappedStates, defaultWordWrapState, transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { browser } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -10,7 +10,7 @@ import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable) {
+var toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -27,17 +27,19 @@ var toDOM = function toDOM(node, contentEditable) {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
     contenteditable: fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
-    'data-testid': 'code-block--code'
+    'data-testid': 'code-block--code',
+    'aria-label': formattedAriaLabel
   }, 0]]], ['div', {
     class: codeBlockClassNames.end,
     contenteditable: 'false'
   }]];
 };
 export var CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     _classCallCheck(this, CodeBlockView);
+    _defineProperty(this, "formattedAriaLabel", '');
     _defineProperty(this, "ensureLineNumbers", rafSchedule(function () {
       var lines = 1;
       _this.node.forEach(function (node) {
@@ -68,7 +70,7 @@ export var CodeBlockView = /*#__PURE__*/function () {
       _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
     });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled), formattedAriaLabel)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -80,6 +82,12 @@ export var CodeBlockView = /*#__PURE__*/function () {
     this.api = api;
     if (fg('editor_support_code_block_wrapping')) {
       this.maintainDynamicGutterSize();
+
+      // Ensure the code block node has a wrapped state.
+      // Wrapped state may already exist from breakout's recreating the node.
+      if (!codeBlockWrappedStates.has(_node)) {
+        codeBlockWrappedStates.set(_node, defaultWordWrapState);
+      }
     } else {
       this.ensureLineNumbers();
     }
@@ -192,6 +200,6 @@ export var CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
-  return new CodeBlockView(node, view, getPos, api);
+export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, formattedAriaLabel, api) {
+  return new CodeBlockView(node, view, getPos, formattedAriaLabel, api);
 };

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

@@ -1,10 +1,61 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
+import { getAllCodeBlockNodesInDoc } from '../utils';
 export var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
-export var generateLineAttributesFromNode = function generateLineAttributesFromNode(pos, node) {
+export var DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
+
+/**
+ * Generate the initial decorations for the code block.
+ */
+export var generateInitialDecorations = function generateInitialDecorations(state) {
+  var codeBlockNodes = getAllCodeBlockNodesInDoc(state);
+  return codeBlockNodes.flatMap(function (node) {
+    return createLineNumbersDecorations(node);
+  });
+};
+
+/**
+ * Update all the decorations used by the code block.
+ */
+export var updateCodeBlockDecorations = function updateCodeBlockDecorations(tr, state, decorationSet) {
+  var updatedDecorationSet = decorationSet;
+  var codeBlockNodes = getAllCodeBlockNodesInDoc(state);
+
+  // All the line numbers decorators are refreshed on doc change.
+  updatedDecorationSet = updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, updatedDecorationSet);
+
+  // Check to make sure the word wrap decorators are still valid.
+  updatedDecorationSet = validateWordWrappedDecorators(tr, codeBlockNodes, updatedDecorationSet);
+  return updatedDecorationSet;
+};
+
+/**
+ * Update the decorations set with the line number decorators.
+ */
+export var updateDecorationSetWithLineNumberDecorators = function updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, decorationSet) {
+  var updatedDecorationSet = decorationSet;
+  // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+  var children = updatedDecorationSet.find(undefined, undefined, function (spec) {
+    return spec.type === DECORATION_WIDGET_TYPE;
+  });
+  updatedDecorationSet = updatedDecorationSet.remove(children);
+
+  // regenerate all the line number for the documents code blocks
+  var lineNumberDecorators = [];
+  codeBlockNodes.forEach(function (node) {
+    lineNumberDecorators.push.apply(lineNumberDecorators, _toConsumableArray(createLineNumbersDecorations(node)));
+  });
+
+  // add the newly generated line numbers to the decorations set
+  return updatedDecorationSet.add(tr.doc, [].concat(lineNumberDecorators));
+};
+export var generateLineAttributesFromNode = function generateLineAttributesFromNode(node) {
+  var innerNode = node.node,
+    pos = node.pos;
   // Get content node
-  var contentNode = node.content;
+  var contentNode = innerNode.content;
 
   // Get node text content
   var lineAttributes = [];
@@ -57,6 +108,60 @@ export var createDecorationSetFromLineAttributes = function createDecorationSetF
   });
   return widgetDecorations;
 };
-export var createLineNumbersDecorations = function createLineNumbersDecorations(pos, node) {
-  return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(pos, node));
+export var createLineNumbersDecorations = function createLineNumbersDecorations(node) {
+  return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node));
+};
+
+/**
+ * There are edge cases like when a user drags and drops a code block node where the decorator breaks and no longer reflects
+ * the correct word wrap state. This function validates that the decorator and the state are in line, otherwise it will
+ * retrigger the logic to apply the word wrap decorator.
+ */
+export var validateWordWrappedDecorators = function validateWordWrappedDecorators(tr, codeBlockNodes, decorationSet) {
+  var updatedDecorationSet = decorationSet;
+  codeBlockNodes.forEach(function (node) {
+    var isCodeBlockWrappedInState = isCodeBlockWordWrapEnabled(node.node);
+    var isCodeBlockWrappedByDecorator = getWordWrapDecoratorsFromNodePos(node.pos, decorationSet).length !== 0;
+    if (isCodeBlockWrappedInState && !isCodeBlockWrappedByDecorator) {
+      updatedDecorationSet = updateDecorationSetWithWordWrappedDecorator(decorationSet, tr, node);
+    }
+  });
+  return updatedDecorationSet;
+};
+
+/**
+ * Update the decoration set with the word wrap decorator.
+ */
+export var updateDecorationSetWithWordWrappedDecorator = function updateDecorationSetWithWordWrappedDecorator(decorationSet, tr, node) {
+  if (!node || node.pos === undefined) {
+    return decorationSet;
+  }
+  var updatedDecorationSet = decorationSet;
+  var pos = node.pos,
+    innerNode = node.node;
+  var isNodeWrapped = isCodeBlockWordWrapEnabled(innerNode);
+  if (!isNodeWrapped) {
+    var currentWrappedBlockDecorationSet = getWordWrapDecoratorsFromNodePos(pos, updatedDecorationSet);
+    updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
+  } else {
+    var wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
+      class: codeBlockClassNames.contentFgWrapped
+    }, {
+      type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+    } // Allows for quick filtering of decorations while using `find`
+    );
+    updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+  }
+  return updatedDecorationSet;
+};
+
+/**
+ * Get the word wrap decorators for the given node position.
+ */
+export var getWordWrapDecoratorsFromNodePos = function getWordWrapDecoratorsFromNodePos(pos, decorationSet) {
+  var codeBlockNodePosition = pos + 1; // We need to add 1 to the position to get the start of the node.
+  var currentWrappedBlockDecorationSet = decorationSet.find(codeBlockNodePosition, codeBlockNodePosition, function (spec) {
+    return spec.type === DECORATION_WRAPPED_BLOCK_NODE_TYPE;
+  });
+  return currentWrappedBlockDecorationSet;
 };

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

@@ -1,13 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { codeBlockNodeView } from '../nodeviews/code-block';
@@ -15,8 +14,7 @@ import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
-import { createLineNumbersDecorations, DECORATION_WIDGET_TYPE } from './decorators';
-var DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
+import { generateInitialDecorations, updateCodeBlockDecorations, updateDecorationSetWithWordWrappedDecorator } from './decorators';
 export var createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
     useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
@@ -25,57 +23,6 @@ export var createPlugin = function createPlugin(_ref) {
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
     api = _ref.api;
   var handleDOMEvents = {};
-  var createLineNumberDecoratorsFromDecendants = function createLineNumberDecoratorsFromDecendants(editorState) {
-    var lineNumberDecorators = [];
-    editorState.doc.descendants(function (node, pos) {
-      if (node.type === editorState.schema.nodes.codeBlock) {
-        lineNumberDecorators.push.apply(lineNumberDecorators, _toConsumableArray(createLineNumbersDecorations(pos, node)));
-        return false;
-      }
-      return true;
-    });
-    return lineNumberDecorators;
-  };
-  var createWordWrappedDecoratorPluginState = function createWordWrappedDecoratorPluginState(pluginState, tr, node) {
-    var decorationSetFromState = pluginState.decorations;
-    if (node) {
-      var pos = node.pos,
-        innerNode = node.node;
-      if (pos !== undefined) {
-        var isNodeWrapped = isCodeBlockWordWrapEnabled(innerNode);
-        if (!isNodeWrapped) {
-          // Restricts the range of decorators to the current node while not including the previous nodes position in range
-          var codeBlockNodePosition = pos + 1;
-          var currentWrappedBlockDecorationSet = decorationSetFromState.find(codeBlockNodePosition, codeBlockNodePosition, function (spec) {
-            return spec.type === DECORATION_WRAPPED_BLOCK_NODE_TYPE;
-          });
-          decorationSetFromState = decorationSetFromState.remove(currentWrappedBlockDecorationSet);
-        } else {
-          var wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
-            class: codeBlockClassNames.contentFgWrapped
-          }, {
-            type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
-          } // Allows for quick filtering of decorations while using `find`
-          );
-          decorationSetFromState = decorationSetFromState.add(tr.doc, [wrappedBlock]);
-        }
-      }
-    }
-    return decorationSetFromState;
-  };
-  var updateLineDecorationSet = function updateLineDecorationSet(tr, state, decorationSet) {
-    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
-    var children = decorationSet.find(undefined, undefined, function (spec) {
-      return spec.type === DECORATION_WIDGET_TYPE;
-    });
-    decorationSet = decorationSet.remove(children);
-
-    // regenerate all the line number for the documents code blocks
-    var lineDecorators = createLineNumberDecoratorsFromDecendants(state);
-
-    // add the newly generated line numbers to the decorations set
-    return decorationSet.add(tr.doc, _toConsumableArray(lineDecorators));
-  };
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
@@ -119,13 +66,13 @@ export var createPlugin = function createPlugin(_ref) {
     state: {
       init: function init(_, state) {
         var node = findCodeBlock(state, state.selection);
-        var lineNumberDecorators = fg('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
+        var initialDecorations = fg('editor_support_code_block_wrapping') ? generateInitialDecorations(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: DecorationSet.create(state.doc, lineNumberDecorators)
+          decorations: DecorationSet.create(state.doc, initialDecorations)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -133,18 +80,18 @@ export var createPlugin = function createPlugin(_ref) {
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_IS_WRAPPED && fg('editor_support_code_block_wrapping')) {
           var node = findCodeBlock(newState, tr.selection);
           return _objectSpread(_objectSpread({}, pluginState), {}, {
-            decorations: createWordWrappedDecoratorPluginState(pluginState, tr, node)
+            decorations: updateDecorationSetWithWordWrappedDecorator(pluginState.decorations, tr, node)
           });
         }
         if (tr.docChanged) {
           var _node = findCodeBlock(newState, tr.selection);
 
           // Updates mapping position of all existing decorations to new positions
-          // specifically used for updating word wrap node decorators
+          // specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
           var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
-
-          // Wipe and regenerate all line numbers in the document
-          updatedDecorationSet = updateLineDecorationSet(tr, newState, updatedDecorationSet);
+          if (fg('editor_support_code_block_wrapping')) {
+            updatedDecorationSet = updateCodeBlockDecorations(tr, newState, updatedDecorationSet);
+          }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof NodeSelection,
@@ -182,7 +129,10 @@ export var createPlugin = function createPlugin(_ref) {
       },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return codeBlockNodeView(node, view, getPos, api);
+          var _getIntl = getIntl(),
+            formatMessage = _getIntl.formatMessage;
+          var formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
+          return codeBlockNodeView(node, view, getPos, formattedAriaLabel, api);
         }
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {

package/dist/esm/toolbar.js

@@ -99,7 +99,6 @@ export var getToolbarConfig = function getToolbarConfig() {
       supportsViewMode: true,
       icon: WrapIcon,
       onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
-      // Hooking up here for demo purposes. To be revisited with ED-24222.
       title: isWrapped ? formatMessage(codeBlockButtonMessages.unwrapCode) : formatMessage(codeBlockButtonMessages.wrapCode),
       tabIndex: null,
       selected: isWrapped

package/dist/esm/utils.js

@@ -1,4 +1,18 @@
 export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '@atlaskit/editor-common/transforms';
 export function getCursor(selection) {
   return selection.$cursor || undefined;
+}
+export function getAllCodeBlockNodesInDoc(state) {
+  var codeBlockNodes = [];
+  state.doc.descendants(function (node, pos) {
+    if (node.type === state.schema.nodes.codeBlock) {
+      codeBlockNodes.push({
+        node: node,
+        pos: pos
+      });
+      return false;
+    }
+    return true;
+  });
+  return codeBlockNodes;
 }

package/dist/types/nodeviews/code-block.d.ts

@@ -10,8 +10,9 @@ export declare class CodeBlockView {
     lineNumberGutter: HTMLElement;
     getPos: getPosHandlerNode;
     view: EditorView;
+    formattedAriaLabel: string;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, formattedAriaLabel: string, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -27,4 +28,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, formattedAriaLabel: string, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;

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

@@ -1,7 +1,35 @@
-import type { Node } from '@atlaskit/editor-prosemirror/model';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { type EditorState, type ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
+import { type NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockLineAttributes } from '../types';
 export declare const DECORATION_WIDGET_TYPE = "decorationWidgetType";
-export declare const generateLineAttributesFromNode: (pos: number, node: Node) => CodeBlockLineAttributes[];
+export declare const DECORATION_WRAPPED_BLOCK_NODE_TYPE = "decorationNodeType";
+/**
+ * Generate the initial decorations for the code block.
+ */
+export declare const generateInitialDecorations: (state: EditorState) => Decoration[];
+/**
+ * Update all the decorations used by the code block.
+ */
+export declare const updateCodeBlockDecorations: (tr: ReadonlyTransaction, state: EditorState, decorationSet: DecorationSet) => DecorationSet;
+/**
+ * Update the decorations set with the line number decorators.
+ */
+export declare const updateDecorationSetWithLineNumberDecorators: (tr: ReadonlyTransaction, codeBlockNodes: NodeWithPos[], decorationSet: DecorationSet) => DecorationSet;
+export declare const generateLineAttributesFromNode: (node: NodeWithPos) => CodeBlockLineAttributes[];
 export declare const createDecorationSetFromLineAttributes: (lineAttributes: CodeBlockLineAttributes[]) => Decoration[];
-export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];
+export declare const createLineNumbersDecorations: (node: NodeWithPos) => Decoration[];
+/**
+ * There are edge cases like when a user drags and drops a code block node where the decorator breaks and no longer reflects
+ * the correct word wrap state. This function validates that the decorator and the state are in line, otherwise it will
+ * retrigger the logic to apply the word wrap decorator.
+ */
+export declare const validateWordWrappedDecorators: (tr: ReadonlyTransaction, codeBlockNodes: NodeWithPos[], decorationSet: DecorationSet) => DecorationSet;
+/**
+ * Update the decoration set with the word wrap decorator.
+ */
+export declare const updateDecorationSetWithWordWrappedDecorator: (decorationSet: DecorationSet, tr: ReadonlyTransaction, node: NodeWithPos | undefined) => DecorationSet;
+/**
+ * Get the word wrap decorators for the given node position.
+ */
+export declare const getWordWrapDecoratorsFromNodePos: (pos: number, decorationSet: DecorationSet) => Decoration[];

package/dist/types/utils.d.ts

@@ -1,4 +1,6 @@
 export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, } from '@atlaskit/editor-common/transforms';
 import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export declare function getCursor(selection: Selection): ResolvedPos | undefined;
+export declare function getAllCodeBlockNodesInDoc(state: EditorState): NodeWithPos[];

package/dist/types-ts4.5/nodeviews/code-block.d.ts

@@ -10,8 +10,9 @@ export declare class CodeBlockView {
     lineNumberGutter: HTMLElement;
     getPos: getPosHandlerNode;
     view: EditorView;
+    formattedAriaLabel: string;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, formattedAriaLabel: string, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -27,4 +28,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, formattedAriaLabel: string, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;

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

@@ -1,7 +1,35 @@
-import type { Node } from '@atlaskit/editor-prosemirror/model';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { type EditorState, type ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
+import { type NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockLineAttributes } from '../types';
 export declare const DECORATION_WIDGET_TYPE = "decorationWidgetType";
-export declare const generateLineAttributesFromNode: (pos: number, node: Node) => CodeBlockLineAttributes[];
+export declare const DECORATION_WRAPPED_BLOCK_NODE_TYPE = "decorationNodeType";
+/**
+ * Generate the initial decorations for the code block.
+ */
+export declare const generateInitialDecorations: (state: EditorState) => Decoration[];
+/**
+ * Update all the decorations used by the code block.
+ */
+export declare const updateCodeBlockDecorations: (tr: ReadonlyTransaction, state: EditorState, decorationSet: DecorationSet) => DecorationSet;
+/**
+ * Update the decorations set with the line number decorators.
+ */
+export declare const updateDecorationSetWithLineNumberDecorators: (tr: ReadonlyTransaction, codeBlockNodes: NodeWithPos[], decorationSet: DecorationSet) => DecorationSet;
+export declare const generateLineAttributesFromNode: (node: NodeWithPos) => CodeBlockLineAttributes[];
 export declare const createDecorationSetFromLineAttributes: (lineAttributes: CodeBlockLineAttributes[]) => Decoration[];
-export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];
+export declare const createLineNumbersDecorations: (node: NodeWithPos) => Decoration[];
+/**
+ * There are edge cases like when a user drags and drops a code block node where the decorator breaks and no longer reflects
+ * the correct word wrap state. This function validates that the decorator and the state are in line, otherwise it will
+ * retrigger the logic to apply the word wrap decorator.
+ */
+export declare const validateWordWrappedDecorators: (tr: ReadonlyTransaction, codeBlockNodes: NodeWithPos[], decorationSet: DecorationSet) => DecorationSet;
+/**
+ * Update the decoration set with the word wrap decorator.
+ */
+export declare const updateDecorationSetWithWordWrappedDecorator: (decorationSet: DecorationSet, tr: ReadonlyTransaction, node: NodeWithPos | undefined) => DecorationSet;
+/**
+ * Get the word wrap decorators for the given node position.
+ */
+export declare const getWordWrapDecoratorsFromNodePos: (pos: number, decorationSet: DecorationSet) => Decoration[];

package/dist/types-ts4.5/utils.d.ts

@@ -1,4 +1,6 @@
 export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, } from '@atlaskit/editor-common/transforms';
 import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export declare function getCursor(selection: Selection): ResolvedPos | undefined;
+export declare function getAllCodeBlockNodesInDoc(state: EditorState): NodeWithPos[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.3.8",
+	"version": "3.3.10",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -10,8 +10,6 @@
 	"atlassian": {
 		"team": "Editor: Core Experiences",
 		"singleton": true,
-		"inPublicMirror": false,
-		"releaseModel": "continuous",
 		"runReact18": false
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -34,8 +32,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
-		"@atlaskit/code": "^15.5.0",
-		"@atlaskit/editor-common": "^88.2.0",
+		"@atlaskit/code": "^15.6.0",
+		"@atlaskit/editor-common": "^88.5.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-composition": "^1.2.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",