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

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.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 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

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

package/dist/esm/actions.js

@@ -209,24 +209,22 @@ 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: {
           platform: PLATFORMS.WEB,
           mode: MODE.EDITOR,
-          wordWrapEnabled: updatedToggleState
+          wordWrapEnabled: updatedToggleState,
+          codeBlockNodeSize: codeBlockNode.nodeSize
         },
         eventType: EVENT_TYPE.TRACK
-      };
-
-      // TODO: ED-24320 should convert this to attachAnalyticsEvent if it is dispatching a transaction here.
-      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent(payload);
+      })(tr);
       dispatch(tr);
     }
     return true;

package/dist/esm/index.js

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

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

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

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

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

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

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.contentFgWrapped
+          }, {
+            type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+          } // Allows for quick filtering of decorations while using `find`
+          );
+          decorationSetFromState = decorationSetFromState.add(tr.doc, [wrappedBlock]);
+        }
+      }
+    }
+    return decorationSetFromState;
+  };
+  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+    var decorationSetFromState = pluginState.decorations;
+    if (node) {
+      var pos = node.pos,
+        innerNode = node.node;
+      if (pos !== undefined) {
+        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
+        // @ts-ignore
+        decorationSetFromState.children = [];
+        var lineDecorators = 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

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

package/dist/types/index.d.ts

@@ -1,4 +1,3 @@
 export { default as codeBlockPlugin } from './plugin';
 export type { CodeBlockPlugin } from './plugin';
 export type { CodeBlockOptions } from './types';
-export { createDecorationSetFromTextPositions, generateTextPositionsFromNode, } from './pm-plugins/decorators';

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/decorators.d.ts

@@ -1,6 +1,6 @@
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import type { CodeBlockTextPosition } from '../types';
-export declare const generateTextPositionsFromNode: (pos: number, node: Node) => CodeBlockTextPosition[];
-export declare const createDecorationSetFromTextPositions: (textPositions: CodeBlockTextPosition[]) => Decoration[];
+import type { CodeBlockLineAttributes } from '../types';
+export declare const generateLineAttributesFromNode: (pos: number, node: Node) => CodeBlockLineAttributes[];
+export declare const createDecorationSetFromLineAttributes: (lineAttributes: CodeBlockLineAttributes[]) => Decoration[];
 export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];

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/types.d.ts

@@ -3,7 +3,7 @@ export interface CodeBlockOptions extends LongPressSelectionPluginOptions {
     allowCopyToClipboard?: boolean;
     allowCompositionInputOverride?: boolean;
 }
-export type CodeBlockTextPosition = {
+export type CodeBlockLineAttributes = {
     lineStart: number;
-    lineEnd: number;
+    lineNumber: number;
 };

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

@@ -4,8 +4,10 @@ export declare const codeBlockClassNames: {
     end: string;
     contentWrapper: string;
     gutter: string;
-    gutterFgWrap: string;
     content: string;
-    contentWrapped: string;
-    lineNumberWrapped: string;
+    contentWrapperFg: string;
+    contentFg: string;
+    contentFgWrapped: string;
+    lineNumberWidget: string;
+    gutterFg: string;
 };

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

@@ -1,4 +1,3 @@
 export { default as codeBlockPlugin } from './plugin';
 export type { CodeBlockPlugin } from './plugin';
 export type { CodeBlockOptions } from './types';
-export { createDecorationSetFromTextPositions, generateTextPositionsFromNode, } from './pm-plugins/decorators';

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/decorators.d.ts

@@ -1,6 +1,6 @@
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import type { CodeBlockTextPosition } from '../types';
-export declare const generateTextPositionsFromNode: (pos: number, node: Node) => CodeBlockTextPosition[];
-export declare const createDecorationSetFromTextPositions: (textPositions: CodeBlockTextPosition[]) => Decoration[];
+import type { CodeBlockLineAttributes } from '../types';
+export declare const generateLineAttributesFromNode: (pos: number, node: Node) => CodeBlockLineAttributes[];
+export declare const createDecorationSetFromLineAttributes: (lineAttributes: CodeBlockLineAttributes[]) => Decoration[];
 export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];

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/types.d.ts

@@ -3,7 +3,7 @@ export interface CodeBlockOptions extends LongPressSelectionPluginOptions {
     allowCopyToClipboard?: boolean;
     allowCompositionInputOverride?: boolean;
 }
-export type CodeBlockTextPosition = {
+export type CodeBlockLineAttributes = {
     lineStart: number;
-    lineEnd: number;
+    lineNumber: number;
 };

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

@@ -4,8 +4,10 @@ export declare const codeBlockClassNames: {
     end: string;
     contentWrapper: string;
     gutter: string;
-    gutterFgWrap: string;
     content: string;
-    contentWrapped: string;
-    lineNumberWrapped: string;
+    contentWrapperFg: string;
+    contentFg: string;
+    contentFgWrapped: string;
+    lineNumberWidget: string;
+    gutterFg: string;
 };