@atlaskit/editor-plugin-code-block 3.3.0 → 3.3.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.2
+
+### Patch Changes
+
+- [#128111](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128111)
+  [`9863ffeb3e73e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9863ffeb3e73e) -
+  remove codeblock preserve newlines ff
+- [#129049](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129049)
+  [`6b1533d389c9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1533d389c9d) -
+  [ux] ED-24511 - Convert code block line numbers inline decorations to widget decorations. The line
+  number gutter on editor code blocks should now reflect the number of lines of code, including when
+  the code block has word wrap enabled. Minor for editor-common as new analytics attribute added.
+- Updated dependencies
+
+## 3.3.1
+
+### Patch Changes
+
+- [#127940](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127940)
+  [`7f340ec35b8a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7f340ec35b8a4) -
+  [ux] ED-24320 Hook up decorators for toggled on and toggled off wrapping states in floating
+  toolbar
+
 ## 3.3.0
 
 ### Minor Changes

package/dist/cjs/actions.js

@@ -219,24 +219,22 @@ var toggleWordWrapStateForCodeBlockNode = exports.toggleWordWrapStateForCodeBloc
     }
     var updatedToggleState = !(0, _codeBlock.isCodeBlockWordWrapEnabled)(codeBlockNode);
     _codeBlock.codeBlockWrappedStates.set(codeBlockNode, updatedToggleState);
-
-    // TODO: Remove in ED-24222. Leaving here for demo purposes.
-    // eslint-disable-next-line no-console
-    console.log("Code Block Word Wrap: Updating codeBlockWrappedStates with: ".concat(updatedToggleState));
+    tr.setMeta(_pluginKey.pluginKey, {
+      type: _actions.ACTIONS.SET_IS_WRAPPED,
+      data: updatedToggleState
+    });
     if (dispatch) {
-      var payload = {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
         action: _analytics.ACTION.TOGGLE_CODE_BLOCK_WRAP,
         actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
         attributes: {
           platform: _analytics.PLATFORMS.WEB,
           mode: _analytics.MODE.EDITOR,
-          wordWrapEnabled: updatedToggleState
+          wordWrapEnabled: updatedToggleState,
+          codeBlockNodeSize: codeBlockNode.nodeSize
         },
         eventType: _analytics.EVENT_TYPE.TRACK
-      };
-
-      // TODO: ED-24320 should convert this to attachAnalyticsEvent if it is dispatching a transaction here.
-      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent(payload);
+      })(tr);
       dispatch(tr);
     }
     return true;

package/dist/cjs/index.js

@@ -10,17 +10,4 @@ Object.defineProperty(exports, "codeBlockPlugin", {
     return _plugin.default;
   }
 });
-Object.defineProperty(exports, "createDecorationSetFromTextPositions", {
-  enumerable: true,
-  get: function get() {
-    return _decorators.createDecorationSetFromTextPositions;
-  }
-});
-Object.defineProperty(exports, "generateTextPositionsFromNode", {
-  enumerable: true,
-  get: function get() {
-    return _decorators.generateTextPositionsFromNode;
-  }
-});
-var _plugin = _interopRequireDefault(require("./plugin"));
-var _decorators = require("./pm-plugins/decorators");
+var _plugin = _interopRequireDefault(require("./plugin"));

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

@@ -24,12 +24,12 @@ var toDOM = function toDOM(node, contentEditable) {
     class: _classNames.codeBlockClassNames.start,
     contenteditable: 'false'
   }], ['div', {
-    class: _classNames.codeBlockClassNames.contentWrapper
+    class: "".concat(_classNames.codeBlockClassNames.contentWrapper, " ").concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') && _classNames.codeBlockClassNames.contentWrapperFg)
   }, ['div', {
-    class: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFgWrap : _classNames.codeBlockClassNames.gutter,
+    class: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFg : _classNames.codeBlockClassNames.gutter,
     contenteditable: 'false'
   }], ['div', {
-    class: _classNames.codeBlockClassNames.content
+    class: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? "".concat(_classNames.codeBlockClassNames.contentFg) : _classNames.codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
@@ -69,7 +69,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.node = _node;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.lineNumberGutter = this.dom.querySelector(".".concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFgWrap : _classNames.codeBlockClassNames.gutter));
+    this.lineNumberGutter = this.dom.querySelector(".".concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFg : _classNames.codeBlockClassNames.gutter));
     this.api = api;
     if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
       this.ensureLineNumbers();

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

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ACTIONS = void 0;
 var ACTIONS = exports.ACTIONS = {
   SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
-  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS'
+  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS',
+  SET_IS_WRAPPED: 'SET_IS_WRAPPED'
 };

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

@@ -4,46 +4,58 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateTextPositionsFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromTextPositions = void 0;
+exports.generateLineAttributesFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _classNames = require("../ui/class-names");
-var generateTextPositionsFromNode = exports.generateTextPositionsFromNode = function generateTextPositionsFromNode(pos, node) {
+var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+var generateLineAttributesFromNode = exports.generateLineAttributesFromNode = function generateLineAttributesFromNode(pos, node) {
   // Get content node
   var contentNode = node.content;
 
   // Get node text content
-  var textPositions = [];
+  var lineAttributes = [];
   contentNode.forEach(function (child) {
     var nodeTextContent = child.textContent;
     var nodeStartPos = pos;
     var lineStartIndex = nodeStartPos;
-    var newLinePositions = nodeTextContent.split('\n').map(function (line) {
+    var newLineAttributes = nodeTextContent.split('\n').map(function (line, index) {
       var lineLength = line.length;
       var lineStart = lineStartIndex + 1;
-      var lineEnd = lineStart + lineLength;
+      var lineNumber = index + 1;
 
       // Include the newline character and increment to keep tabs on line position
       lineStartIndex += lineLength + 1;
       return {
         lineStart: lineStart,
-        lineEnd: lineEnd
+        lineNumber: lineNumber
       };
     });
-    textPositions = [].concat((0, _toConsumableArray2.default)(textPositions), (0, _toConsumableArray2.default)(newLinePositions));
+    lineAttributes = [].concat((0, _toConsumableArray2.default)(lineAttributes), (0, _toConsumableArray2.default)(newLineAttributes));
   });
-  return textPositions;
+  return lineAttributes;
 };
-var createDecorationSetFromTextPositions = exports.createDecorationSetFromTextPositions = function createDecorationSetFromTextPositions(textPositions) {
-  var decorations = textPositions.map(function (textPosition) {
-    var lineStart = textPosition.lineStart,
-      lineEnd = textPosition.lineEnd;
-    return _view.Decoration.inline(lineStart, lineEnd, {
-      class: _classNames.codeBlockClassNames.lineNumberWrapped
+var createDecorationSetFromLineAttributes = exports.createDecorationSetFromLineAttributes = function createDecorationSetFromLineAttributes(lineAttributes) {
+  var widgetDecorations = lineAttributes.map(function (lineAttribute) {
+    var lineStart = lineAttribute.lineStart,
+      lineNumber = lineAttribute.lineNumber;
+
+    // Passing a function to create the widget rather than directly passing a widget, as per ProseMirror docs.
+    var createLineNumberWidget = function createLineNumberWidget() {
+      var widget = document.createElement('span');
+      widget.textContent = "".concat(lineNumber);
+      widget.classList.add(_classNames.codeBlockClassNames.lineNumberWidget);
+      return widget;
+    };
+
+    // side -1 is used so the line numbers are the first thing to the left of the lines of code.
+    return _view.Decoration.widget(lineStart, createLineNumberWidget, {
+      type: DECORATION_WIDGET_TYPE,
+      side: -1
     });
   });
-  return decorations;
+  return widgetDecorations;
 };
 var createLineNumbersDecorations = exports.createLineNumbersDecorations = function createLineNumbersDecorations(pos, node) {
-  return createDecorationSetFromTextPositions(generateTextPositionsFromNode(pos, node));
+  return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(pos, node));
 };

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

@@ -9,7 +9,6 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils3 = require("../utils");
 var deleteCurrentItem = function deleteCurrentItem($from) {
   return function (tr) {
@@ -58,7 +57,6 @@ function keymapPlugin(schema) {
       var _state$schema$nodes2 = state.schema.nodes,
         codeBlock = _state$schema$nodes2.codeBlock,
         listItem = _state$schema$nodes2.listItem,
-        paragraph = _state$schema$nodes2.paragraph,
         table = _state$schema$nodes2.table,
         layoutColumn = _state$schema$nodes2.layoutColumn;
       if (!$cursor || $cursor.parent.type !== codeBlock || !dispatch) {
@@ -69,11 +67,7 @@ function keymapPlugin(schema) {
         if (!node) {
           return false;
         }
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.codeblock-preserve-newlines_54r3m')) {
-          replaceWithParagraph(node.node, node.pos, $cursor, state, dispatch);
-        } else {
-          dispatch(state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, []).setBlockType($cursor.pos, $cursor.pos, paragraph));
-        }
+        replaceWithParagraph(node.node, node.pos, $cursor, state, dispatch);
         return true;
       }
       if ($cursor.node && (0, _utils.isEmptyNode)(schema)($cursor.node()) && ((0, _utils2.hasParentNodeOfType)(layoutColumn)(state.selection) || (0, _utils2.hasParentNodeOfType)(table)(state.selection))) {

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

@@ -6,6 +6,8 @@ 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 _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -13,7 +15,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 _codeBlock = require("../nodeviews/code-block");
+var _codeBlock2 = require("../nodeviews/code-block");
 var _pluginKey = require("../plugin-key");
 var _classNames = require("../ui/class-names");
 var _utils2 = require("../utils");
@@ -21,16 +23,57 @@ 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,
     getIntl = _ref.getIntl,
     _ref$allowComposition = _ref.allowCompositionInputOverride,
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
-    api = _ref.api,
-    _ref$isWrapped = _ref.isWrapped,
-    isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped;
+    api = _ref.api;
   var handleDOMEvents = {};
+  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 createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+    var decorationSetFromState = pluginState.decorations;
+    if (node) {
+      var pos = node.pos,
+        innerNode = node.node;
+      if (pos !== undefined) {
+        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
+        // @ts-ignore
+        decorationSetFromState.children = [];
+        var lineDecorators = (0, _decorators.createLineNumbersDecorations)(pos, innerNode);
+        decorationSetFromState = decorationSetFromState.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
+      }
+    }
+    return decorationSetFromState;
+  };
 
   // 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.
@@ -83,22 +126,30 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
-        if (tr.docChanged || tr.selectionSet) {
+        var meta = tr.getMeta(_pluginKey.pluginKey);
+        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);
-          var lineNumberDecorators = [];
-          if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
-            if (node && node.pos !== undefined) {
-              lineNumberDecorators = (0, _decorators.createLineNumbersDecorations)(node.pos, node.node);
-            }
-          }
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            decorations: createWordWrappedDecoratorPluginState(pluginState, tr, node)
+          });
+        }
+        if (tr.docChanged) {
+          var _node = (0, _utils2.findCodeBlock)(newState, tr.selection);
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
-            pos: node ? node.pos : null,
+            pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof _state.NodeSelection,
-            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _view.DecorationSet.create(tr.doc, lineNumberDecorators) : _view.DecorationSet.empty
+            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, _node) : _view.DecorationSet.empty
           });
           return newPluginState;
         }
-        var meta = tr.getMeta(_pluginKey.pluginKey);
+        if (tr.selectionSet) {
+          var _node2 = (0, _utils2.findCodeBlock)(newState, tr.selection);
+          var _newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+            pos: _node2 ? _node2.pos : null,
+            isNodeSelected: tr.selection instanceof _state.NodeSelection
+          });
+          return _newPluginState;
+        }
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions2.ACTIONS.SET_COPIED_TO_CLIPBOARD) {
           return _objectSpread(_objectSpread({}, pluginState), {}, {
             contentCopied: meta.data
@@ -121,7 +172,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
       },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return (0, _codeBlock.codeBlockNodeView)(node, view, getPos, api);
+          return (0, _codeBlock2.codeBlockNodeView)(node, view, getPos, api);
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {

package/dist/cjs/toolbar.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.languageListFilter = exports.getToolbarConfig = void 0;
+var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
@@ -38,6 +39,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
     if ((node === null || node === void 0 ? void 0 : node.type) !== nodeType) {
       return;
     }
+    var isWrapped = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node);
     var language = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
     var options = languageList.map(function (lang) {
       return {
@@ -107,8 +109,9 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       icon: _WrapIcon.WrapIcon,
       onClick: (0, _actions.toggleWordWrapStateForCodeBlockNode)(editorAnalyticsAPI),
       // Hooking up here for demo purposes. To be revisited with ED-24222.
-      title: formatMessage(_messages.codeBlockButtonMessages.wrapCode),
-      tabIndex: null
+      title: isWrapped ? formatMessage(_messages.codeBlockButtonMessages.unwrapCode) : formatMessage(_messages.codeBlockButtonMessages.wrapCode),
+      tabIndex: null,
+      selected: isWrapped
     };
     return {
       title: 'CodeBlock floating controls',

package/dist/cjs/ui/class-names.js

@@ -11,8 +11,11 @@ var codeBlockClassNames = exports.codeBlockClassNames = {
   end: _styles.CodeBlockSharedCssClassName.CODEBLOCK_END,
   contentWrapper: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
   gutter: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
-  gutterFgWrap: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP,
   content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
-  contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
-  lineNumberWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED
+  // Feature Gate editor_support_code_block_wrapping:
+  contentWrapperFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG,
+  contentFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG,
+  contentFgWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED,
+  lineNumberWidget: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET,
+  gutterFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG
 };

package/dist/es2019/actions.js

@@ -230,24 +230,22 @@ export const toggleWordWrapStateForCodeBlockNode = editorAnalyticsAPI => (state,
   }
   const updatedToggleState = !isCodeBlockWordWrapEnabled(codeBlockNode);
   codeBlockWrappedStates.set(codeBlockNode, updatedToggleState);
-
-  // TODO: Remove in ED-24222. Leaving here for demo purposes.
-  // eslint-disable-next-line no-console
-  console.log(`Code Block Word Wrap: Updating codeBlockWrappedStates with: ${updatedToggleState}`);
+  tr.setMeta(pluginKey, {
+    type: ACTIONS.SET_IS_WRAPPED,
+    data: updatedToggleState
+  });
   if (dispatch) {
-    const payload = {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
       action: ACTION.TOGGLE_CODE_BLOCK_WRAP,
       actionSubject: ACTION_SUBJECT.CODE_BLOCK,
       attributes: {
         platform: PLATFORMS.WEB,
         mode: MODE.EDITOR,
-        wordWrapEnabled: updatedToggleState
+        wordWrapEnabled: updatedToggleState,
+        codeBlockNodeSize: codeBlockNode.nodeSize
       },
       eventType: EVENT_TYPE.TRACK
-    };
-
-    // TODO: ED-24320 should convert this to attachAnalyticsEvent if it is dispatching a transaction here.
-    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent(payload);
+    })(tr);
     dispatch(tr);
   }
   return true;

package/dist/es2019/index.js

@@ -1,2 +1 @@
-export { default as codeBlockPlugin } from './plugin';
-export { createDecorationSetFromTextPositions, generateTextPositionsFromNode } from './pm-plugins/decorators';
+export { default as codeBlockPlugin } from './plugin';

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

@@ -14,12 +14,12 @@ const toDOM = (node, contentEditable) => ['div', {
   class: codeBlockClassNames.start,
   contenteditable: 'false'
 }], ['div', {
-  class: codeBlockClassNames.contentWrapper
+  class: `${codeBlockClassNames.contentWrapper} ${fg('editor_support_code_block_wrapping') && codeBlockClassNames.contentWrapperFg}`
 }, ['div', {
-  class: fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFgWrap : codeBlockClassNames.gutter,
+  class: fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFg : codeBlockClassNames.gutter,
   contenteditable: 'false'
 }], ['div', {
-  class: codeBlockClassNames.content
+  class: fg('editor_support_code_block_wrapping') ? `${codeBlockClassNames.contentFg}` : codeBlockClassNames.content
 }, ['code', {
   'data-language': node.attrs.language || '',
   spellcheck: 'false',
@@ -57,7 +57,7 @@ export class CodeBlockView {
     this.node = _node;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.lineNumberGutter = this.dom.querySelector(`.${fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFgWrap : codeBlockClassNames.gutter}`);
+    this.lineNumberGutter = this.dom.querySelector(`.${fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFg : codeBlockClassNames.gutter}`);
     this.api = api;
     if (!fg('editor_support_code_block_wrapping')) {
       this.ensureLineNumbers();

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

@@ -1,4 +1,5 @@
 export const ACTIONS = {
   SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
-  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS'
+  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS',
+  SET_IS_WRAPPED: 'SET_IS_WRAPPED'
 };

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

@@ -1,41 +1,53 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
-export const generateTextPositionsFromNode = (pos, node) => {
+const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+export const generateLineAttributesFromNode = (pos, node) => {
   // Get content node
   const contentNode = node.content;
 
   // Get node text content
-  let textPositions = [];
+  let lineAttributes = [];
   contentNode.forEach(child => {
     const nodeTextContent = child.textContent;
     const nodeStartPos = pos;
     let lineStartIndex = nodeStartPos;
-    const newLinePositions = nodeTextContent.split('\n').map(line => {
+    const newLineAttributes = nodeTextContent.split('\n').map((line, index) => {
       const lineLength = line.length;
       const lineStart = lineStartIndex + 1;
-      const lineEnd = lineStart + lineLength;
+      const lineNumber = index + 1;
 
       // Include the newline character and increment to keep tabs on line position
       lineStartIndex += lineLength + 1;
       return {
         lineStart,
-        lineEnd
+        lineNumber
       };
     });
-    textPositions = [...textPositions, ...newLinePositions];
+    lineAttributes = [...lineAttributes, ...newLineAttributes];
   });
-  return textPositions;
+  return lineAttributes;
 };
-export const createDecorationSetFromTextPositions = textPositions => {
-  const decorations = textPositions.map(textPosition => {
+export const createDecorationSetFromLineAttributes = lineAttributes => {
+  const widgetDecorations = lineAttributes.map(lineAttribute => {
     const {
       lineStart,
-      lineEnd
-    } = textPosition;
-    return Decoration.inline(lineStart, lineEnd, {
-      class: codeBlockClassNames.lineNumberWrapped
+      lineNumber
+    } = lineAttribute;
+
+    // Passing a function to create the widget rather than directly passing a widget, as per ProseMirror docs.
+    const createLineNumberWidget = () => {
+      const widget = document.createElement('span');
+      widget.textContent = `${lineNumber}`;
+      widget.classList.add(codeBlockClassNames.lineNumberWidget);
+      return widget;
+    };
+
+    // side -1 is used so the line numbers are the first thing to the left of the lines of code.
+    return Decoration.widget(lineStart, createLineNumberWidget, {
+      type: DECORATION_WIDGET_TYPE,
+      side: -1
     });
   });
-  return decorations;
+  return widgetDecorations;
 };
-export const createLineNumbersDecorations = (pos, node) => createDecorationSetFromTextPositions(generateTextPositionsFromNode(pos, node));
+export const createLineNumbersDecorations = (pos, node) => createDecorationSetFromLineAttributes(generateLineAttributesFromNode(pos, node));

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

@@ -2,7 +2,6 @@ import { isEmptyNode } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getCursor } from '../utils';
 const deleteCurrentItem = $from => tr => {
   return tr.delete($from.before($from.depth), $from.after($from.depth));
@@ -50,7 +49,6 @@ export function keymapPlugin(schema) {
       const {
         codeBlock,
         listItem,
-        paragraph,
         table,
         layoutColumn
       } = state.schema.nodes;
@@ -62,11 +60,7 @@ export function keymapPlugin(schema) {
         if (!node) {
           return false;
         }
-        if (getBooleanFF('platform.editor.codeblock-preserve-newlines_54r3m')) {
-          replaceWithParagraph(node.node, node.pos, $cursor, state, dispatch);
-        } else {
-          dispatch(state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, []).setBlockType($cursor.pos, $cursor.pos, paragraph));
-        }
+        replaceWithParagraph(node.node, node.pos, $cursor, state, dispatch);
         return true;
       }
       if ($cursor.node && isEmptyNode(schema)($cursor.node()) && (hasParentNodeOfType(layoutColumn)(state.selection) || hasParentNodeOfType(table)(state.selection))) {