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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.11
+
+### Patch Changes
+
+- [#136266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136266)
+  [`cb41a82ab6813`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cb41a82ab6813) -
+  ED-24752 Add new plugin to code block that strips auto inserted fullstops from mac on code blocks
+- Updated dependencies
+
+## 3.3.10
+
+### Patch Changes
+
+- [`cbe3b04ebb0b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cbe3b04ebb0b6) -
+  ED-24730 - Address bug where word wrap decorator broke on drag and drop. Required some refactoring
+  of decoration functions for code block. Moved all of them to decorators.ts and added unit tests.
+
 ## 3.3.9
 
 ### Patch Changes

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

@@ -89,6 +89,12 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.api = api;
     if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
       this.maintainDynamicGutterSize();
+
+      // Ensure the code block node has a wrapped state.
+      // Wrapped state may already exist from breakout's recreating the node.
+      if (!_codeBlock.codeBlockWrappedStates.has(_node)) {
+        _codeBlock.codeBlockWrappedStates.set(_node, _codeBlock.defaultWordWrapState);
+      }
     } else {
       this.ensureLineNumbers();
     }

package/dist/cjs/plugin.js

@@ -12,6 +12,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _actions = require("./actions");
+var _codeBlockAutoFullStopTransformPlugin = require("./pm-plugins/codeBlockAutoFullStopTransformPlugin");
 var _codeBlockCopySelectionPlugin = require("./pm-plugins/codeBlockCopySelectionPlugin");
 var _ideUx = _interopRequireDefault(require("./pm-plugins/ide-ux"));
 var _inputRule = require("./pm-plugins/input-rule");
@@ -65,6 +66,11 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         plugin: function plugin() {
           return (0, _codeBlockCopySelectionPlugin.codeBlockCopySelectionPlugin)();
         }
+      }, {
+        name: 'codeBlockAutoFullStopTransform',
+        plugin: function plugin() {
+          return (0, _codeBlockAutoFullStopTransformPlugin.codeBlockAutoFullStopTransformPlugin)();
+        }
       }];
     },
     // Workaround for a firefox issue where dom selection is off sync

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBlockAutoFullStopTransformPlugin = codeBlockAutoFullStopTransformPlugin;
+exports.codeBlockAutoFullStopTransformPluginKey = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _utils2 = require("../utils");
+var codeBlockAutoFullStopTransformPluginKey = exports.codeBlockAutoFullStopTransformPluginKey = new _state.PluginKey('codeBlockAutoFullStopTransformPluginKey');
+function codeBlockAutoFullStopTransformPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: codeBlockAutoFullStopTransformPluginKey,
+    appendTransaction: function appendTransaction(_transactions, oldState, newState) {
+      if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') || !(0, _platformFeatureFlags.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 = !!(0, _utils2.findCodeBlock)(oldState, trOld.selection) && !!(0, _utils2.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 (_utils.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/cjs/pm-plugins/decorators.js

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

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

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

package/dist/cjs/toolbar.js

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

package/dist/cjs/utils.js

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

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
-import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
+import { codeBlockWrappedStates, defaultWordWrapState, transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { browser } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -77,6 +77,12 @@ export class CodeBlockView {
     this.api = api;
     if (fg('editor_support_code_block_wrapping')) {
       this.maintainDynamicGutterSize();
+
+      // Ensure the code block node has a wrapped state.
+      // Wrapped state may already exist from breakout's recreating the node.
+      if (!codeBlockWrappedStates.has(_node)) {
+        codeBlockWrappedStates.set(_node, defaultWordWrapState);
+      }
     } else {
       this.ensureLineNumbers();
     }

package/dist/es2019/plugin.js

@@ -4,6 +4,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';
@@ -51,6 +52,9 @@ const codeBlockPlugin = ({
     }, {
       name: 'codeBlockCopySelection',
       plugin: () => codeBlockCopySelectionPlugin()
+    }, {
+      name: 'codeBlockAutoFullStopTransform',
+      plugin: () => codeBlockAutoFullStopTransformPlugin()
     }];
   },
   // Workaround for a firefox issue where dom selection is off sync

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

@@ -0,0 +1,65 @@
+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 const codeBlockAutoFullStopTransformPluginKey = new PluginKey('codeBlockAutoFullStopTransformPluginKey');
+export function codeBlockAutoFullStopTransformPlugin() {
+  return new SafePlugin({
+    key: codeBlockAutoFullStopTransformPluginKey,
+    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
+      const {
+        tr: trNew
+      } = newState;
+      const {
+        tr: trOld
+      } = oldState;
+      const {
+        from: fromOld
+      } = trOld.selection;
+      const {
+        from: fromNew,
+        to: toNew
+      } = trNew.selection;
+      const 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 {
+          const textBetweenBefore = trOld.doc.textBetween(fromOld - 1, fromOld); // ' '
+          const 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/es2019/pm-plugins/decorators.js

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