@atlaskit/editor-plugin-code-block 3.4.1 → 3.4.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.4.3
+
+### Patch Changes
+
+- [#149087](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/149087)
+  [`8b2dcb618ccf8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b2dcb618ccf8) -
+  ED-25141: Code block wrapping performance improvement. Only update the line number decorators on a
+  given code block when a line has been added or removed. Previously was updating line number
+  decorators on every update for all code blocks.
+
+## 3.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.4.1
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+exports.validateWordWrappedDecorators = exports.updateDecorationSetWithWordWrappedDecorator = exports.updateDecorationSetWithLineNumberDecorators = exports.updateCodeBlockDecorations = exports.getWordWrapDecoratorsFromNodePos = exports.generateLineAttributesFromNode = exports.generateInitialDecorations = 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");
@@ -22,7 +22,7 @@ var DECORATION_WRAPPED_BLOCK_NODE_TYPE = exports.DECORATION_WRAPPED_BLOCK_NODE_T
 var generateInitialDecorations = exports.generateInitialDecorations = function generateInitialDecorations(state) {
   var codeBlockNodes = (0, _utils.getAllCodeBlockNodesInDoc)(state);
   return codeBlockNodes.flatMap(function (node) {
-    return createLineNumbersDecorations(node);
+    return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node));
   });
 };
 
@@ -31,8 +31,7 @@ var generateInitialDecorations = exports.generateInitialDecorations = function g
  */
 var updateCodeBlockDecorations = exports.updateCodeBlockDecorations = function updateCodeBlockDecorations(tr, codeBlockNodes, decorationSet) {
   var updatedDecorationSet = decorationSet;
-
-  // All the line numbers decorators are refreshed on doc change.
+  // Update line number decorators for changed code block nodes if new line added or line removed.
   updatedDecorationSet = updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, updatedDecorationSet);
 
   // Check to make sure the word wrap decorators are still valid.
@@ -41,23 +40,36 @@ var updateCodeBlockDecorations = exports.updateCodeBlockDecorations = function u
 };
 
 /**
- * Update the decorations set with the line number decorators.
+ * Update the decorations set with the line number decorators. This will only happen for the code blocks passed to this function
+ * when there has been a new line added or removed. The line decorations will not update the code block node otherwise.
  */
 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
+  if (!(0, _platformFeatureFlags.fg)('editor_code_wrapping_perf_improvement_ed-25141')) {
+    var children = updatedDecorationSet.find(undefined, undefined, function (spec) {
+      return spec.type === DECORATION_WIDGET_TYPE;
+    });
+    updatedDecorationSet = updatedDecorationSet.remove(children);
+  }
   var lineNumberDecorators = [];
   codeBlockNodes.forEach(function (node) {
-    lineNumberDecorators.push.apply(lineNumberDecorators, (0, _toConsumableArray2.default)(createLineNumbersDecorations(node)));
+    if ((0, _platformFeatureFlags.fg)('editor_code_wrapping_perf_improvement_ed-25141')) {
+      var existingWidgetsOnNode = updatedDecorationSet.find(node.pos, node.pos + node.node.nodeSize, function (spec) {
+        return spec.type === DECORATION_WIDGET_TYPE;
+      });
+      var newLineAttributes = generateLineAttributesFromNode(node);
+
+      // There will be no widgets on initialisation. If the number of existing widgets does not equal the amount of lines, regenerate the widgets.
+      // There may be a case where the number of existing widgets and the number of lines are the same, that's why we track totalLineCount. This allows
+      // us to know how many lines there were when the widget was created. It avoids a break in line numbers, e.g. "1, 2, 3, 5, 6". Happens on line removal.
+      if (existingWidgetsOnNode.length === 0 || existingWidgetsOnNode.length !== newLineAttributes.length || existingWidgetsOnNode[0].spec.totalLineCount !== newLineAttributes.length) {
+        updatedDecorationSet = updatedDecorationSet.remove(existingWidgetsOnNode);
+        lineNumberDecorators.push.apply(lineNumberDecorators, (0, _toConsumableArray2.default)(createDecorationSetFromLineAttributes(newLineAttributes)));
+      }
+    } else {
+      lineNumberDecorators.push.apply(lineNumberDecorators, (0, _toConsumableArray2.default)(createDecorationSetFromLineAttributes(generateLineAttributesFromNode(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) {
@@ -110,16 +122,15 @@ var createDecorationSetFromLineAttributes = exports.createDecorationSetFromLineA
     };
 
     // side -1 is used so the line numbers are the first thing to the left of the lines of code.
+    // totalLineCount is used to know whether or not to update the line numbers when a new line is added or removed.
     return _view.Decoration.widget(lineStart, createLineNumberWidget, {
       type: DECORATION_WIDGET_TYPE,
-      side: -1
+      side: -1,
+      totalLineCount: (0, _platformFeatureFlags.fg)('editor_code_wrapping_perf_improvement_ed-25141') ? lineAttributes.length : undefined
     });
   });
   return widgetDecorations;
 };
-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

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

@@ -98,11 +98,13 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           // specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
           var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
           if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
-            var codeBlockNodes = (0, _utils.getAllCodeBlockNodesInDoc)(newState);
-            if ((0, _platformFeatureFlags.fg)('editor_code_block_wrapping_language_change_bug')) {
-              (0, _codeBlock.updateCodeBlockWrappedStateNodeKeys)(codeBlockNodes, _oldState);
+            var codeBlockNodes = (0, _platformFeatureFlags.fg)('editor_code_wrapping_perf_improvement_ed-25141') ? (0, _utils.getAllChangedCodeBlocksInTransaction)(tr, newState) : (0, _utils.getAllCodeBlockNodesInDoc)(newState);
+            if (codeBlockNodes) {
+              if ((0, _platformFeatureFlags.fg)('editor_code_block_wrapping_language_change_bug')) {
+                (0, _codeBlock.updateCodeBlockWrappedStateNodeKeys)(codeBlockNodes, _oldState);
+              }
+              updatedDecorationSet = (0, _decorators.updateCodeBlockDecorations)(tr, codeBlockNodes, updatedDecorationSet);
             }
-            updatedDecorationSet = (0, _decorators.updateCodeBlockDecorations)(tr, codeBlockNodes, updatedDecorationSet);
           }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,

package/dist/cjs/utils.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "findCodeBlock", {
     return _transforms.findCodeBlock;
   }
 });
+exports.getAllChangedCodeBlocksInTransaction = getAllChangedCodeBlocksInTransaction;
 exports.getAllCodeBlockNodesInDoc = getAllCodeBlockNodesInDoc;
 exports.getCursor = getCursor;
 Object.defineProperty(exports, "transformSingleLineCodeBlockToCodeMark", {
@@ -27,6 +28,8 @@ var _transforms = require("@atlaskit/editor-common/transforms");
 function getCursor(selection) {
   return selection.$cursor || undefined;
 }
+
+// Replaced by getAllChangedCodeBlocksInTransaction with FG editor_code_wrapping_perf_improvement_ed-25141.
 function getAllCodeBlockNodesInDoc(state) {
   var codeBlockNodes = [];
   state.doc.descendants(function (node, pos) {
@@ -40,4 +43,28 @@ function getAllCodeBlockNodesInDoc(state) {
     return true;
   });
   return codeBlockNodes;
+}
+function getAllChangedCodeBlocksInTransaction(tr, state) {
+  var changedCodeBlocks = [];
+  var nodePositions = new Set();
+  tr.steps.forEach(function (step) {
+    var mapResult = step.getMap();
+    mapResult.forEach(function (oldStart, oldEnd, newStart, newEnd) {
+      state.doc.nodesBetween(newStart, newEnd, function (node, pos) {
+        if (node.type.name === 'codeBlock') {
+          if (!nodePositions.has(pos)) {
+            nodePositions.add(pos);
+            changedCodeBlocks.push({
+              node: node,
+              pos: pos
+            });
+          }
+        }
+      });
+    });
+  });
+  if (changedCodeBlocks.length < 1) {
+    return null;
+  }
+  return changedCodeBlocks;
 }

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

@@ -1,4 +1,5 @@
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -12,7 +13,7 @@ export const DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
  */
 export const generateInitialDecorations = state => {
   const codeBlockNodes = getAllCodeBlockNodesInDoc(state);
-  return codeBlockNodes.flatMap(node => createLineNumbersDecorations(node));
+  return codeBlockNodes.flatMap(node => createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node)));
 };
 
 /**
@@ -20,8 +21,7 @@ export const generateInitialDecorations = state => {
  */
 export const updateCodeBlockDecorations = (tr, codeBlockNodes, decorationSet) => {
   let updatedDecorationSet = decorationSet;
-
-  // All the line numbers decorators are refreshed on doc change.
+  // Update line number decorators for changed code block nodes if new line added or line removed.
   updatedDecorationSet = updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, updatedDecorationSet);
 
   // Check to make sure the word wrap decorators are still valid.
@@ -30,21 +30,32 @@ export const updateCodeBlockDecorations = (tr, codeBlockNodes, decorationSet) =>
 };
 
 /**
- * Update the decorations set with the line number decorators.
+ * Update the decorations set with the line number decorators. This will only happen for the code blocks passed to this function
+ * when there has been a new line added or removed. The line decorations will not update the code block node otherwise.
  */
 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
+  if (!fg('editor_code_wrapping_perf_improvement_ed-25141')) {
+    const children = updatedDecorationSet.find(undefined, undefined, spec => spec.type === DECORATION_WIDGET_TYPE);
+    updatedDecorationSet = updatedDecorationSet.remove(children);
+  }
   const lineNumberDecorators = [];
   codeBlockNodes.forEach(node => {
-    lineNumberDecorators.push(...createLineNumbersDecorations(node));
-  });
+    if (fg('editor_code_wrapping_perf_improvement_ed-25141')) {
+      const existingWidgetsOnNode = updatedDecorationSet.find(node.pos, node.pos + node.node.nodeSize, spec => spec.type === DECORATION_WIDGET_TYPE);
+      const newLineAttributes = generateLineAttributesFromNode(node);
 
-  // add the newly generated line numbers to the decorations set
+      // There will be no widgets on initialisation. If the number of existing widgets does not equal the amount of lines, regenerate the widgets.
+      // There may be a case where the number of existing widgets and the number of lines are the same, that's why we track totalLineCount. This allows
+      // us to know how many lines there were when the widget was created. It avoids a break in line numbers, e.g. "1, 2, 3, 5, 6". Happens on line removal.
+      if (existingWidgetsOnNode.length === 0 || existingWidgetsOnNode.length !== newLineAttributes.length || existingWidgetsOnNode[0].spec.totalLineCount !== newLineAttributes.length) {
+        updatedDecorationSet = updatedDecorationSet.remove(existingWidgetsOnNode);
+        lineNumberDecorators.push(...createDecorationSetFromLineAttributes(newLineAttributes));
+      }
+    } else {
+      lineNumberDecorators.push(...createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node)));
+    }
+  });
   return updatedDecorationSet.add(tr.doc, [...lineNumberDecorators]);
 };
 export const generateLineAttributesFromNode = node => {
@@ -101,14 +112,15 @@ export const createDecorationSetFromLineAttributes = lineAttributes => {
     };
 
     // side -1 is used so the line numbers are the first thing to the left of the lines of code.
+    // totalLineCount is used to know whether or not to update the line numbers when a new line is added or removed.
     return Decoration.widget(lineStart, createLineNumberWidget, {
       type: DECORATION_WIDGET_TYPE,
-      side: -1
+      side: -1,
+      totalLineCount: fg('editor_code_wrapping_perf_improvement_ed-25141') ? lineAttributes.length : undefined
     });
   });
   return widgetDecorations;
 };
-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

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

@@ -12,7 +12,7 @@ import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '.
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
-import { findCodeBlock, getAllCodeBlockNodesInDoc } from '../utils';
+import { findCodeBlock, getAllChangedCodeBlocksInTransaction, getAllCodeBlockNodesInDoc } from '../utils';
 import { ACTIONS } from './actions';
 import { generateInitialDecorations, updateCodeBlockDecorations, updateDecorationSetWithWordWrappedDecorator } from './decorators';
 export const createPlugin = ({
@@ -88,11 +88,13 @@ export const createPlugin = ({
           // specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
           let updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
           if (fg('editor_support_code_block_wrapping')) {
-            const codeBlockNodes = getAllCodeBlockNodesInDoc(newState);
-            if (fg('editor_code_block_wrapping_language_change_bug')) {
-              updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
+            const codeBlockNodes = fg('editor_code_wrapping_perf_improvement_ed-25141') ? getAllChangedCodeBlocksInTransaction(tr, newState) : getAllCodeBlockNodesInDoc(newState);
+            if (codeBlockNodes) {
+              if (fg('editor_code_block_wrapping_language_change_bug')) {
+                updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
+              }
+              updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
             }
-            updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
           }
           const newPluginState = {
             ...pluginState,

package/dist/es2019/utils.js

@@ -2,6 +2,8 @@ export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleL
 export function getCursor(selection) {
   return selection.$cursor || undefined;
 }
+
+// Replaced by getAllChangedCodeBlocksInTransaction with FG editor_code_wrapping_perf_improvement_ed-25141.
 export function getAllCodeBlockNodesInDoc(state) {
   const codeBlockNodes = [];
   state.doc.descendants((node, pos) => {
@@ -15,4 +17,28 @@ export function getAllCodeBlockNodesInDoc(state) {
     return true;
   });
   return codeBlockNodes;
+}
+export function getAllChangedCodeBlocksInTransaction(tr, state) {
+  const changedCodeBlocks = [];
+  const nodePositions = new Set();
+  tr.steps.forEach(step => {
+    const mapResult = step.getMap();
+    mapResult.forEach((oldStart, oldEnd, newStart, newEnd) => {
+      state.doc.nodesBetween(newStart, newEnd, (node, pos) => {
+        if (node.type.name === 'codeBlock') {
+          if (!nodePositions.has(pos)) {
+            nodePositions.add(pos);
+            changedCodeBlocks.push({
+              node,
+              pos
+            });
+          }
+        }
+      });
+    });
+  });
+  if (changedCodeBlocks.length < 1) {
+    return null;
+  }
+  return changedCodeBlocks;
 }

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

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -14,7 +15,7 @@ export var DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 export var generateInitialDecorations = function generateInitialDecorations(state) {
   var codeBlockNodes = getAllCodeBlockNodesInDoc(state);
   return codeBlockNodes.flatMap(function (node) {
-    return createLineNumbersDecorations(node);
+    return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node));
   });
 };
 
@@ -23,8 +24,7 @@ export var generateInitialDecorations = function generateInitialDecorations(stat
  */
 export var updateCodeBlockDecorations = function updateCodeBlockDecorations(tr, codeBlockNodes, decorationSet) {
   var updatedDecorationSet = decorationSet;
-
-  // All the line numbers decorators are refreshed on doc change.
+  // Update line number decorators for changed code block nodes if new line added or line removed.
   updatedDecorationSet = updateDecorationSetWithLineNumberDecorators(tr, codeBlockNodes, updatedDecorationSet);
 
   // Check to make sure the word wrap decorators are still valid.
@@ -33,23 +33,36 @@ export var updateCodeBlockDecorations = function updateCodeBlockDecorations(tr,
 };
 
 /**
- * Update the decorations set with the line number decorators.
+ * Update the decorations set with the line number decorators. This will only happen for the code blocks passed to this function
+ * when there has been a new line added or removed. The line decorations will not update the code block node otherwise.
  */
 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
+  if (!fg('editor_code_wrapping_perf_improvement_ed-25141')) {
+    var children = updatedDecorationSet.find(undefined, undefined, function (spec) {
+      return spec.type === DECORATION_WIDGET_TYPE;
+    });
+    updatedDecorationSet = updatedDecorationSet.remove(children);
+  }
   var lineNumberDecorators = [];
   codeBlockNodes.forEach(function (node) {
-    lineNumberDecorators.push.apply(lineNumberDecorators, _toConsumableArray(createLineNumbersDecorations(node)));
-  });
+    if (fg('editor_code_wrapping_perf_improvement_ed-25141')) {
+      var existingWidgetsOnNode = updatedDecorationSet.find(node.pos, node.pos + node.node.nodeSize, function (spec) {
+        return spec.type === DECORATION_WIDGET_TYPE;
+      });
+      var newLineAttributes = generateLineAttributesFromNode(node);
 
-  // add the newly generated line numbers to the decorations set
+      // There will be no widgets on initialisation. If the number of existing widgets does not equal the amount of lines, regenerate the widgets.
+      // There may be a case where the number of existing widgets and the number of lines are the same, that's why we track totalLineCount. This allows
+      // us to know how many lines there were when the widget was created. It avoids a break in line numbers, e.g. "1, 2, 3, 5, 6". Happens on line removal.
+      if (existingWidgetsOnNode.length === 0 || existingWidgetsOnNode.length !== newLineAttributes.length || existingWidgetsOnNode[0].spec.totalLineCount !== newLineAttributes.length) {
+        updatedDecorationSet = updatedDecorationSet.remove(existingWidgetsOnNode);
+        lineNumberDecorators.push.apply(lineNumberDecorators, _toConsumableArray(createDecorationSetFromLineAttributes(newLineAttributes)));
+      }
+    } else {
+      lineNumberDecorators.push.apply(lineNumberDecorators, _toConsumableArray(createDecorationSetFromLineAttributes(generateLineAttributesFromNode(node))));
+    }
+  });
   return updatedDecorationSet.add(tr.doc, [].concat(lineNumberDecorators));
 };
 export var generateLineAttributesFromNode = function generateLineAttributesFromNode(node) {
@@ -102,16 +115,15 @@ export var createDecorationSetFromLineAttributes = function createDecorationSetF
     };
 
     // side -1 is used so the line numbers are the first thing to the left of the lines of code.
+    // totalLineCount is used to know whether or not to update the line numbers when a new line is added or removed.
     return Decoration.widget(lineStart, createLineNumberWidget, {
       type: DECORATION_WIDGET_TYPE,
-      side: -1
+      side: -1,
+      totalLineCount: fg('editor_code_wrapping_perf_improvement_ed-25141') ? lineAttributes.length : undefined
     });
   });
   return widgetDecorations;
 };
-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

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

@@ -15,7 +15,7 @@ import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '.
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
-import { findCodeBlock, getAllCodeBlockNodesInDoc } from '../utils';
+import { findCodeBlock, getAllChangedCodeBlocksInTransaction, getAllCodeBlockNodesInDoc } from '../utils';
 import { ACTIONS } from './actions';
 import { generateInitialDecorations, updateCodeBlockDecorations, updateDecorationSetWithWordWrappedDecorator } from './decorators';
 export var createPlugin = function createPlugin(_ref) {
@@ -93,11 +93,13 @@ export var createPlugin = function createPlugin(_ref) {
           // specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
           var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
           if (fg('editor_support_code_block_wrapping')) {
-            var codeBlockNodes = getAllCodeBlockNodesInDoc(newState);
-            if (fg('editor_code_block_wrapping_language_change_bug')) {
-              updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
+            var codeBlockNodes = fg('editor_code_wrapping_perf_improvement_ed-25141') ? getAllChangedCodeBlocksInTransaction(tr, newState) : getAllCodeBlockNodesInDoc(newState);
+            if (codeBlockNodes) {
+              if (fg('editor_code_block_wrapping_language_change_bug')) {
+                updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
+              }
+              updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
             }
-            updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
           }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,

package/dist/esm/utils.js

@@ -2,6 +2,8 @@ export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleL
 export function getCursor(selection) {
   return selection.$cursor || undefined;
 }
+
+// Replaced by getAllChangedCodeBlocksInTransaction with FG editor_code_wrapping_perf_improvement_ed-25141.
 export function getAllCodeBlockNodesInDoc(state) {
   var codeBlockNodes = [];
   state.doc.descendants(function (node, pos) {
@@ -15,4 +17,28 @@ export function getAllCodeBlockNodesInDoc(state) {
     return true;
   });
   return codeBlockNodes;
+}
+export function getAllChangedCodeBlocksInTransaction(tr, state) {
+  var changedCodeBlocks = [];
+  var nodePositions = new Set();
+  tr.steps.forEach(function (step) {
+    var mapResult = step.getMap();
+    mapResult.forEach(function (oldStart, oldEnd, newStart, newEnd) {
+      state.doc.nodesBetween(newStart, newEnd, function (node, pos) {
+        if (node.type.name === 'codeBlock') {
+          if (!nodePositions.has(pos)) {
+            nodePositions.add(pos);
+            changedCodeBlocks.push({
+              node: node,
+              pos: pos
+            });
+          }
+        }
+      });
+    });
+  });
+  if (changedCodeBlocks.length < 1) {
+    return null;
+  }
+  return changedCodeBlocks;
 }

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

@@ -13,12 +13,12 @@ export declare const generateInitialDecorations: (state: EditorState) => Decorat
  */
 export declare const updateCodeBlockDecorations: (tr: ReadonlyTransaction, codeBlockNodes: NodeWithPos[], decorationSet: DecorationSet) => DecorationSet;
 /**
- * Update the decorations set with the line number decorators.
+ * Update the decorations set with the line number decorators. This will only happen for the code blocks passed to this function
+ * when there has been a new line added or removed. The line decorations will not update the code block node otherwise.
  */
 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: (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

package/dist/types/utils.d.ts

@@ -1,6 +1,7 @@
 export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, } from '@atlaskit/editor-common/transforms';
 import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, ReadonlyTransaction, 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[];
+export declare function getAllChangedCodeBlocksInTransaction(tr: ReadonlyTransaction, state: EditorState): NodeWithPos[] | null;

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

@@ -13,12 +13,12 @@ export declare const generateInitialDecorations: (state: EditorState) => Decorat
  */
 export declare const updateCodeBlockDecorations: (tr: ReadonlyTransaction, codeBlockNodes: NodeWithPos[], decorationSet: DecorationSet) => DecorationSet;
 /**
- * Update the decorations set with the line number decorators.
+ * Update the decorations set with the line number decorators. This will only happen for the code blocks passed to this function
+ * when there has been a new line added or removed. The line decorations will not update the code block node otherwise.
  */
 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: (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

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

@@ -1,6 +1,7 @@
 export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, } from '@atlaskit/editor-common/transforms';
 import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, ReadonlyTransaction, 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[];
+export declare function getAllChangedCodeBlocksInTransaction(tr: ReadonlyTransaction, state: EditorState): NodeWithPos[] | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.4.1",
+	"version": "3.4.3",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,13 +33,13 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^92.0.0",
+		"@atlaskit/editor-common": "^93.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-composition": "^1.2.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/icon": "^22.19.0",
+		"@atlaskit/icon": "^22.20.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -102,6 +102,9 @@
 		},
 		"editor_nest_media_and_codeblock_in_quotes_jira": {
 			"type": "boolean"
+		},
+		"editor_code_wrapping_perf_improvement_ed-25141": {
+			"type": "boolean"
 		}
 	}
 }