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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.1
+
+### Patch Changes
+
+- [#127940](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127940)
+  [`7f340ec35b8a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7f340ec35b8a4) -
+  [ux] ED-24320 Hook up decorators for toggled on and toggled off wrapping states in floating
+  toolbar
+
 ## 3.3.0
 
 ### Minor Changes

package/dist/cjs/actions.js

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

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

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

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

@@ -8,6 +8,7 @@ exports.generateTextPositionsFromNode = exports.createLineNumbersDecorations = e
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _classNames = require("../ui/class-names");
+var DECORATION_INLINE_TYPE = 'decorationInlineType';
 var generateTextPositionsFromNode = exports.generateTextPositionsFromNode = function generateTextPositionsFromNode(pos, node) {
   // Get content node
   var contentNode = node.content;
@@ -40,6 +41,8 @@ var createDecorationSetFromTextPositions = exports.createDecorationSetFromTextPo
       lineEnd = textPosition.lineEnd;
     return _view.Decoration.inline(lineStart, lineEnd, {
       class: _classNames.codeBlockClassNames.lineNumberWrapped
+    }, {
+      type: DECORATION_INLINE_TYPE
     });
   });
   return decorations;

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -13,7 +15,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("../actions");
-var _codeBlock = require("../nodeviews/code-block");
+var _codeBlock2 = require("../nodeviews/code-block");
 var _pluginKey = require("../plugin-key");
 var _classNames = require("../ui/class-names");
 var _utils2 = require("../utils");
@@ -21,16 +23,57 @@ var _actions2 = require("./actions");
 var _decorators = require("./decorators");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 var createPlugin = exports.createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
     useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
     getIntl = _ref.getIntl,
     _ref$allowComposition = _ref.allowCompositionInputOverride,
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
-    api = _ref.api,
-    _ref$isWrapped = _ref.isWrapped,
-    isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped;
+    api = _ref.api;
   var handleDOMEvents = {};
+  var createWordWrappedDecoratorPluginState = function createWordWrappedDecoratorPluginState(pluginState, tr, node) {
+    var decorationSetFromState = pluginState.decorations;
+    if (node) {
+      var pos = node.pos,
+        innerNode = node.node;
+      if (pos !== undefined) {
+        var isNodeWrapped = (0, _codeBlock.isCodeBlockWordWrapEnabled)(innerNode);
+        if (!isNodeWrapped) {
+          // Restricts the range of decorators to the current node while not including the previous nodes position in range
+          var codeBlockNodePosition = pos + 1;
+          var currentWrappedBlockDecorationSet = decorationSetFromState.find(codeBlockNodePosition, codeBlockNodePosition, function (spec) {
+            return spec.type === DECORATION_WRAPPED_BLOCK_NODE_TYPE;
+          });
+          decorationSetFromState = decorationSetFromState.remove(currentWrappedBlockDecorationSet);
+        } else {
+          var wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {
+            class: _classNames.codeBlockClassNames.wrapped
+          }, {
+            type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+          } // Allows for quick filtering of decorations while using `find`
+          );
+          decorationSetFromState = decorationSetFromState.add(tr.doc, [wrappedBlock]);
+        }
+      }
+    }
+    return decorationSetFromState;
+  };
+  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+    var decorationSetFromState = pluginState.decorations;
+    if (node) {
+      var pos = node.pos,
+        innerNode = node.node;
+      if (pos !== undefined) {
+        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
+        // @ts-ignore
+        decorationSetFromState.children = [];
+        var lineDecorators = (0, _decorators.createLineNumbersDecorations)(pos, innerNode);
+        decorationSetFromState = decorationSetFromState.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
+      }
+    }
+    return decorationSetFromState;
+  };
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
@@ -83,22 +126,30 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
-        if (tr.docChanged || tr.selectionSet) {
+        var meta = tr.getMeta(_pluginKey.pluginKey);
+        if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions2.ACTIONS.SET_IS_WRAPPED && (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
           var node = (0, _utils2.findCodeBlock)(newState, tr.selection);
-          var lineNumberDecorators = [];
-          if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
-            if (node && node.pos !== undefined) {
-              lineNumberDecorators = (0, _decorators.createLineNumbersDecorations)(node.pos, node.node);
-            }
-          }
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            decorations: createWordWrappedDecoratorPluginState(pluginState, tr, node)
+          });
+        }
+        if (tr.docChanged) {
+          var _node = (0, _utils2.findCodeBlock)(newState, tr.selection);
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
-            pos: node ? node.pos : null,
+            pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof _state.NodeSelection,
-            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _view.DecorationSet.create(tr.doc, lineNumberDecorators) : _view.DecorationSet.empty
+            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, _node) : _view.DecorationSet.empty
           });
           return newPluginState;
         }
-        var meta = tr.getMeta(_pluginKey.pluginKey);
+        if (tr.selectionSet) {
+          var _node2 = (0, _utils2.findCodeBlock)(newState, tr.selection);
+          var _newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+            pos: _node2 ? _node2.pos : null,
+            isNodeSelected: tr.selection instanceof _state.NodeSelection
+          });
+          return _newPluginState;
+        }
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions2.ACTIONS.SET_COPIED_TO_CLIPBOARD) {
           return _objectSpread(_objectSpread({}, pluginState), {}, {
             contentCopied: meta.data
@@ -121,7 +172,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
       },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return (0, _codeBlock.codeBlockNodeView)(node, view, getPos, api);
+          return (0, _codeBlock2.codeBlockNodeView)(node, view, getPos, api);
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {

package/dist/cjs/toolbar.js

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

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

@@ -14,5 +14,6 @@ var codeBlockClassNames = exports.codeBlockClassNames = {
   gutterFgWrap: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP,
   content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
   contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
-  lineNumberWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED
+  lineNumberWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED,
+  wrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED
 };

package/dist/es2019/actions.js

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

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

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

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

@@ -1,5 +1,6 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
+const DECORATION_INLINE_TYPE = 'decorationInlineType';
 export const generateTextPositionsFromNode = (pos, node) => {
   // Get content node
   const contentNode = node.content;
@@ -34,6 +35,8 @@ export const createDecorationSetFromTextPositions = textPositions => {
     } = textPosition;
     return Decoration.inline(lineStart, lineEnd, {
       class: codeBlockClassNames.lineNumberWrapped
+    }, {
+      type: DECORATION_INLINE_TYPE
     });
   });
   return decorations;

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

@@ -1,8 +1,9 @@
+import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 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 { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { codeBlockNodeView } from '../nodeviews/code-block';
@@ -11,14 +12,58 @@ import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
 import { createLineNumbersDecorations } from './decorators';
+const DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
   allowCompositionInputOverride = false,
-  api,
-  isWrapped = false
+  api
 }) => {
   const handleDOMEvents = {};
+  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.wrapped
+          }, {
+            type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+          } // Allows for quick filtering of decorations while using `find`
+          );
+          decorationSetFromState = decorationSetFromState.add(tr.doc, [wrappedBlock]);
+        }
+      }
+    }
+    return decorationSetFromState;
+  };
+  const createLineDecoratorPluginState = (pluginState, tr, node) => {
+    let decorationSetFromState = pluginState.decorations;
+    if (node) {
+      const {
+        pos,
+        node: innerNode
+      } = node;
+      if (pos !== undefined) {
+        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
+        // @ts-ignore
+        decorationSetFromState.children = [];
+        const lineDecorators = createLineNumbersDecorations(pos, innerNode);
+        decorationSetFromState = decorationSetFromState.add(tr.doc, [...lineDecorators]);
+      }
+    }
+    return decorationSetFromState;
+  };
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
@@ -69,23 +114,33 @@ export const createPlugin = ({
         };
       },
       apply(tr, pluginState, _oldState, newState) {
-        if (tr.docChanged || tr.selectionSet) {
+        const meta = tr.getMeta(pluginKey);
+        if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_IS_WRAPPED && fg('editor_support_code_block_wrapping')) {
+          const node = findCodeBlock(newState, tr.selection);
+          return {
+            ...pluginState,
+            decorations: createWordWrappedDecoratorPluginState(pluginState, tr, node)
+          };
+        }
+        if (tr.docChanged) {
           const node = findCodeBlock(newState, tr.selection);
-          let lineNumberDecorators = [];
-          if (fg('editor_support_code_block_wrapping')) {
-            if (node && node.pos !== undefined) {
-              lineNumberDecorators = createLineNumbersDecorations(node.pos, node.node);
-            }
-          }
           const newPluginState = {
             ...pluginState,
             pos: node ? node.pos : null,
             isNodeSelected: tr.selection instanceof NodeSelection,
-            decorations: fg('editor_support_code_block_wrapping') ? DecorationSet.create(tr.doc, lineNumberDecorators) : DecorationSet.empty
+            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, node) : DecorationSet.empty
+          };
+          return newPluginState;
+        }
+        if (tr.selectionSet) {
+          const node = findCodeBlock(newState, tr.selection);
+          const newPluginState = {
+            ...pluginState,
+            pos: node ? node.pos : null,
+            isNodeSelected: tr.selection instanceof NodeSelection
           };
           return newPluginState;
         }
-        const meta = tr.getMeta(pluginKey);
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_COPIED_TO_CLIPBOARD) {
           return {
             ...pluginState,

package/dist/es2019/toolbar.js

@@ -1,3 +1,4 @@
+import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
@@ -27,6 +28,7 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
   if ((node === null || node === void 0 ? void 0 : node.type) !== nodeType) {
     return;
   }
+  const isWrapped = isCodeBlockWordWrapEnabled(node);
   const language = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
   const options = languageList.map(lang => ({
     label: lang.name,
@@ -88,8 +90,9 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
     icon: WrapIcon,
     onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
     // Hooking up here for demo purposes. To be revisited with ED-24222.
-    title: formatMessage(codeBlockButtonMessages.wrapCode),
-    tabIndex: null
+    title: isWrapped ? formatMessage(codeBlockButtonMessages.unwrapCode) : formatMessage(codeBlockButtonMessages.wrapCode),
+    tabIndex: null,
+    selected: isWrapped
   };
   return {
     title: 'CodeBlock floating controls',

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

@@ -8,5 +8,6 @@ export const codeBlockClassNames = {
   gutterFgWrap: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP,
   content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
   contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
-  lineNumberWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED
+  lineNumberWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED,
+  wrapped: CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED
 };

package/dist/esm/actions.js

@@ -209,12 +209,12 @@ export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateFor
     }
     var updatedToggleState = !isCodeBlockWordWrapEnabled(codeBlockNode);
     codeBlockWrappedStates.set(codeBlockNode, updatedToggleState);
-
-    // TODO: Remove in ED-24222. Leaving here for demo purposes.
-    // eslint-disable-next-line no-console
-    console.log("Code Block Word Wrap: Updating codeBlockWrappedStates with: ".concat(updatedToggleState));
+    tr.setMeta(pluginKey, {
+      type: ACTIONS.SET_IS_WRAPPED,
+      data: updatedToggleState
+    });
     if (dispatch) {
-      var payload = {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
         action: ACTION.TOGGLE_CODE_BLOCK_WRAP,
         actionSubject: ACTION_SUBJECT.CODE_BLOCK,
         attributes: {
@@ -223,10 +223,7 @@ export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateFor
           wordWrapEnabled: updatedToggleState
         },
         eventType: EVENT_TYPE.TRACK
-      };
-
-      // TODO: ED-24320 should convert this to attachAnalyticsEvent if it is dispatching a transaction here.
-      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent(payload);
+      })(tr);
       dispatch(tr);
     }
     return true;

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

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

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

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
+var DECORATION_INLINE_TYPE = 'decorationInlineType';
 export var generateTextPositionsFromNode = function generateTextPositionsFromNode(pos, node) {
   // Get content node
   var contentNode = node.content;
@@ -33,6 +34,8 @@ export var createDecorationSetFromTextPositions = function createDecorationSetFr
       lineEnd = textPosition.lineEnd;
     return Decoration.inline(lineStart, lineEnd, {
       class: codeBlockClassNames.lineNumberWrapped
+    }, {
+      type: DECORATION_INLINE_TYPE
     });
   });
   return decorations;

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

@@ -1,11 +1,13 @@
 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 { 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 { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { codeBlockNodeView } from '../nodeviews/code-block';
@@ -14,16 +16,57 @@ import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
 import { createLineNumbersDecorations } from './decorators';
+var DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 export var createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
     useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
     getIntl = _ref.getIntl,
     _ref$allowComposition = _ref.allowCompositionInputOverride,
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
-    api = _ref.api,
-    _ref$isWrapped = _ref.isWrapped,
-    isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped;
+    api = _ref.api;
   var handleDOMEvents = {};
+  var createWordWrappedDecoratorPluginState = function createWordWrappedDecoratorPluginState(pluginState, tr, node) {
+    var decorationSetFromState = pluginState.decorations;
+    if (node) {
+      var pos = node.pos,
+        innerNode = node.node;
+      if (pos !== undefined) {
+        var isNodeWrapped = 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.wrapped
+          }, {
+            type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+          } // Allows for quick filtering of decorations while using `find`
+          );
+          decorationSetFromState = decorationSetFromState.add(tr.doc, [wrappedBlock]);
+        }
+      }
+    }
+    return decorationSetFromState;
+  };
+  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+    var decorationSetFromState = pluginState.decorations;
+    if (node) {
+      var pos = node.pos,
+        innerNode = node.node;
+      if (pos !== undefined) {
+        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
+        // @ts-ignore
+        decorationSetFromState.children = [];
+        var lineDecorators = createLineNumbersDecorations(pos, innerNode);
+        decorationSetFromState = decorationSetFromState.add(tr.doc, _toConsumableArray(lineDecorators));
+      }
+    }
+    return decorationSetFromState;
+  };
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
@@ -76,22 +119,30 @@ export var createPlugin = function createPlugin(_ref) {
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
-        if (tr.docChanged || tr.selectionSet) {
+        var meta = tr.getMeta(pluginKey);
+        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);
-          var lineNumberDecorators = [];
-          if (fg('editor_support_code_block_wrapping')) {
-            if (node && node.pos !== undefined) {
-              lineNumberDecorators = createLineNumbersDecorations(node.pos, node.node);
-            }
-          }
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            decorations: createWordWrappedDecoratorPluginState(pluginState, tr, node)
+          });
+        }
+        if (tr.docChanged) {
+          var _node = findCodeBlock(newState, tr.selection);
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
-            pos: node ? node.pos : null,
+            pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof NodeSelection,
-            decorations: fg('editor_support_code_block_wrapping') ? DecorationSet.create(tr.doc, lineNumberDecorators) : DecorationSet.empty
+            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, _node) : DecorationSet.empty
           });
           return newPluginState;
         }
-        var meta = tr.getMeta(pluginKey);
+        if (tr.selectionSet) {
+          var _node2 = findCodeBlock(newState, tr.selection);
+          var _newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+            pos: _node2 ? _node2.pos : null,
+            isNodeSelected: tr.selection instanceof NodeSelection
+          });
+          return _newPluginState;
+        }
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_COPIED_TO_CLIPBOARD) {
           return _objectSpread(_objectSpread({}, pluginState), {}, {
             contentCopied: meta.data

package/dist/esm/toolbar.js

@@ -1,3 +1,4 @@
+import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
@@ -28,6 +29,7 @@ export var getToolbarConfig = function getToolbarConfig() {
     if ((node === null || node === void 0 ? void 0 : node.type) !== nodeType) {
       return;
     }
+    var isWrapped = isCodeBlockWordWrapEnabled(node);
     var language = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
     var options = languageList.map(function (lang) {
       return {
@@ -97,8 +99,9 @@ export var getToolbarConfig = function getToolbarConfig() {
       icon: WrapIcon,
       onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
       // Hooking up here for demo purposes. To be revisited with ED-24222.
-      title: formatMessage(codeBlockButtonMessages.wrapCode),
-      tabIndex: null
+      title: isWrapped ? formatMessage(codeBlockButtonMessages.unwrapCode) : formatMessage(codeBlockButtonMessages.wrapCode),
+      tabIndex: null,
+      selected: isWrapped
     };
     return {
       title: 'CodeBlock floating controls',

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

@@ -8,5 +8,6 @@ export var codeBlockClassNames = {
   gutterFgWrap: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP,
   content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
   contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
-  lineNumberWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED
+  lineNumberWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED,
+  wrapped: CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED
 };

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

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

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

@@ -4,7 +4,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockPlugin } from '../index';
 import { type CodeBlockState } from './main-state';
-export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, isWrapped, }: {
+export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, }: {
     useLongPressSelection?: boolean | undefined;
     getIntl: () => IntlShape;
     allowCompositionInputOverride?: boolean | undefined;
@@ -37,6 +37,5 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
             insertCodeBlock: (inputMethod: import("@atlaskit/editor-common/analytics").INPUT_METHOD) => import("@atlaskit/editor-common/types").Command;
         };
     }> | undefined;
-    isWrapped?: boolean | undefined;
     decorations?: DecorationSet | undefined;
 }) => SafePlugin<CodeBlockState>;

package/dist/types/ui/class-names.d.ts

@@ -8,4 +8,5 @@ export declare const codeBlockClassNames: {
     content: string;
     contentWrapped: string;
     lineNumberWrapped: string;
+    wrapped: string;
 };

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

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

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

@@ -4,7 +4,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockPlugin } from '../index';
 import { type CodeBlockState } from './main-state';
-export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, isWrapped, }: {
+export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, }: {
     useLongPressSelection?: boolean | undefined;
     getIntl: () => IntlShape;
     allowCompositionInputOverride?: boolean | undefined;
@@ -44,6 +44,5 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
             insertCodeBlock: (inputMethod: import("@atlaskit/editor-common/analytics").INPUT_METHOD) => import("@atlaskit/editor-common/types").Command;
         };
     }> | undefined;
-    isWrapped?: boolean | undefined;
     decorations?: DecorationSet | undefined;
 }) => SafePlugin<CodeBlockState>;

package/dist/types-ts4.5/ui/class-names.d.ts

@@ -8,4 +8,5 @@ export declare const codeBlockClassNames: {
     content: string;
     contentWrapped: string;
     lineNumberWrapped: string;
+    wrapped: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.3.0",
+	"version": "3.3.1",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",