@atlaskit/editor-plugin-code-block 3.3.9 → 3.3.11

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

@@ -1,10 +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';
@@ -12,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,
@@ -21,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.
@@ -111,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) {
@@ -126,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,

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';
@@ -82,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();
     }

package/dist/esm/plugin.js

@@ -7,6 +7,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconCode } from '@atlaskit/editor-common/quick-insert';
 import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './actions';
+import { codeBlockAutoFullStopTransformPlugin } from './pm-plugins/codeBlockAutoFullStopTransformPlugin';
 import { codeBlockCopySelectionPlugin } from './pm-plugins/codeBlockCopySelectionPlugin';
 import ideUX from './pm-plugins/ide-ux';
 import { createCodeBlockInputRule } from './pm-plugins/input-rule';
@@ -58,6 +59,11 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         plugin: function plugin() {
           return codeBlockCopySelectionPlugin();
         }
+      }, {
+        name: 'codeBlockAutoFullStopTransform',
+        plugin: function plugin() {
+          return codeBlockAutoFullStopTransformPlugin();
+        }
       }];
     },
     // Workaround for a firefox issue where dom selection is off sync

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

@@ -0,0 +1,58 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { browser } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { findCodeBlock } from '../utils';
+export var codeBlockAutoFullStopTransformPluginKey = new PluginKey('codeBlockAutoFullStopTransformPluginKey');
+export function codeBlockAutoFullStopTransformPlugin() {
+  return new SafePlugin({
+    key: codeBlockAutoFullStopTransformPluginKey,
+    appendTransaction: function appendTransaction(_transactions, oldState, newState) {
+      if (!fg('editor_support_code_block_wrapping') || !fg('code_block_auto_insertion_bug_fix')) {
+        return undefined;
+      }
+
+      // We need to compare the old and new state to isloate auto insertion of fullstop on mac
+      var trNew = newState.tr;
+      var trOld = oldState.tr;
+      var fromOld = trOld.selection.from;
+      var _trNew$selection = trNew.selection,
+        fromNew = _trNew$selection.from,
+        toNew = _trNew$selection.to;
+      var isCodeBlock = !!findCodeBlock(oldState, trOld.selection) && !!findCodeBlock(newState, trNew.selection);
+
+      /**
+       * Mac will auto insert a fullstop when the user double taps the space key after some content.
+       * Line number decorators are assumed content so on new lines the fullstop is inserted.
+       *
+       * - When a fulltop is auto inserted the new states selection is the same, the old state selection is one position less
+       * - The text returned for the old state returns as a space with the selection from - 1
+       * - The text returned for the new state returns as a fullstop with the selection from - 2 to from -1
+       *
+       * This is enough conditional logic to isoloate the auto insertion of the fullstop on mac
+       *
+       * There are some solutions to this problem in codemirror which can be read further here
+       * https://discuss.codemirror.net/t/dot-being-added-when-pressing-space-repeatedly/3899
+       */
+
+      // both selections must be of code block early exit
+      if (browser.mac && fromNew === toNew && fromNew === fromOld + 1 && isCodeBlock) {
+        // detect when '.' is inserted when the previous state was a space ' '
+        try {
+          var textBetweenBefore = trOld.doc.textBetween(fromOld - 1, fromOld); // ' '
+          var textBetweenAfter = trNew.doc.textBetween(fromNew - 2, fromNew - 1); // '.'
+          if (textBetweenBefore === ' ' && textBetweenAfter === '.') {
+            trNew.delete(fromNew - 2, fromNew); // remove the fullstop
+            trNew.insertText('  ', fromNew - 2); // insert double space
+
+            return trNew;
+          }
+        } catch (error) {
+          // if for some reason textBetween fails, just return the new transaction as is by defaut.
+          return undefined;
+        }
+      }
+      return undefined;
+    }
+  });
+}

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,14 +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';
@@ -16,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,
@@ -26,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.
@@ -120,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) {
@@ -134,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,

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/pm-plugins/codeBlockAutoFullStopTransformPlugin.d.ts

@@ -0,0 +1,4 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const codeBlockAutoFullStopTransformPluginKey: PluginKey<any>;
+export declare function codeBlockAutoFullStopTransformPlugin(): SafePlugin<any>;

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/pm-plugins/codeBlockAutoFullStopTransformPlugin.d.ts

@@ -0,0 +1,4 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const codeBlockAutoFullStopTransformPluginKey: PluginKey<any>;
+export declare function codeBlockAutoFullStopTransformPlugin(): SafePlugin<any>;

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[];