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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.4
+
+### Patch Changes
+
+- [#128388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128388)
+  [`0ea0f81d30dcc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ea0f81d30dcc) -
+  ED-24501 Add a CSS var to maintain a dynamic line number gutter size on the code block based on
+  the max number length. ED-24573 update handleClickOn in the code block plugin to work with new
+  line number gutter.
+
+## 3.3.3
+
+### Patch Changes
+
+- [`0f58d3a82867c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0f58d3a82867c) -
+  ED-24500 Add decorators on init of code block and on document updates
+
 ## 3.3.2
 
 ### Patch Changes

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

@@ -60,6 +60,20 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
         _this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
       }
     }));
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    (0, _defineProperty2.default)(this, "maintainDynamicGutterSize", function () {
+      var totalLineCount = 1;
+      _this.node.forEach(function (node) {
+        var text = node.text;
+        if (text) {
+          totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      var maxDigits = totalLineCount.toString().length;
+      _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
+    });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
     var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
       dom = _DOMSerializer$render.dom,
@@ -71,7 +85,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(".".concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFg : _classNames.codeBlockClassNames.gutter));
     this.api = api;
-    if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+    if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+      this.maintainDynamicGutterSize();
+    } else {
       this.ensureLineNumbers();
     }
     this.handleEditorDisabledChanged();
@@ -149,7 +165,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
         this.node = node;
-        if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+        if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+          this.maintainDynamicGutterSize();
+        } else {
           this.ensureLineNumbers();
         }
         if (_utils.browser.android) {

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

@@ -4,17 +4,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateLineAttributesFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = void 0;
+exports.generateLineAttributesFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = exports.DECORATION_WIDGET_TYPE = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _classNames = require("../ui/class-names");
-var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+var DECORATION_WIDGET_TYPE = exports.DECORATION_WIDGET_TYPE = 'decorationWidgetType';
 var generateLineAttributesFromNode = exports.generateLineAttributesFromNode = function generateLineAttributesFromNode(pos, node) {
   // Get content node
   var contentNode = node.content;
 
   // Get node text content
   var lineAttributes = [];
+
+  // Early exit if content size is 0
+  if (contentNode.size === 0) {
+    return [{
+      lineStart: pos + 1,
+      lineNumber: 1
+    }];
+  }
   contentNode.forEach(function (child) {
     var nodeTextContent = child.textContent;
     var nodeStartPos = pos;

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

@@ -32,6 +32,17 @@ 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) {
@@ -59,19 +70,19 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     }
     return decorationSetFromState;
   };
-  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, state) {
     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));
-      }
-    }
+    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+    var children = decorationSetFromState.find(undefined, undefined, function (spec) {
+      return spec.type === _decorators.DECORATION_WIDGET_TYPE;
+    });
+    decorationSetFromState = decorationSetFromState.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
+    decorationSetFromState = decorationSetFromState.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
     return decorationSetFromState;
   };
 
@@ -117,12 +128,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) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: _view.DecorationSet.empty
+          decorations: _view.DecorationSet.create(state.doc, lineNumberDecorators)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -138,7 +150,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof _state.NodeSelection,
-            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, _node) : _view.DecorationSet.empty
+            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : _view.DecorationSet.empty
           });
           return newPluginState;
         }
@@ -176,7 +188,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {
-        return !!(target.closest(".".concat(_classNames.codeBlockClassNames.gutter)) || target.classList.contains(_classNames.codeBlockClassNames.content));
+        return (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? !!(target.classList.contains(_classNames.codeBlockClassNames.lineNumberWidget) || target.classList.contains(_classNames.codeBlockClassNames.gutterFg)) : !!(target.closest(".".concat(_classNames.codeBlockClassNames.gutter)) || target.classList.contains(_classNames.codeBlockClassNames.content));
       }, {
         useLongPressSelection: useLongPressSelection
       }),

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

@@ -47,6 +47,20 @@ export class CodeBlockView {
         this.lineNumberGutter.removeChild(this.lineNumberGutter.lastChild);
       }
     }));
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    _defineProperty(this, "maintainDynamicGutterSize", () => {
+      let totalLineCount = 1;
+      this.node.forEach(node => {
+        const text = node.text;
+        if (text) {
+          totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      const maxDigits = totalLineCount.toString().length;
+      this.dom.style.setProperty('--lineNumberGutterWidth', `${maxDigits}ch`);
+    });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
     const {
       dom,
@@ -59,7 +73,9 @@ export class CodeBlockView {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(`.${fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFg : codeBlockClassNames.gutter}`);
     this.api = api;
-    if (!fg('editor_support_code_block_wrapping')) {
+    if (fg('editor_support_code_block_wrapping')) {
+      this.maintainDynamicGutterSize();
+    } else {
       this.ensureLineNumbers();
     }
     this.handleEditorDisabledChanged();
@@ -126,7 +142,9 @@ export class CodeBlockView {
         this.contentDOM.setAttribute('data-language', node.attrs.language || '');
       }
       this.node = node;
-      if (!fg('editor_support_code_block_wrapping')) {
+      if (fg('editor_support_code_block_wrapping')) {
+        this.maintainDynamicGutterSize();
+      } else {
         this.ensureLineNumbers();
       }
       if (browser.android) {

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

@@ -1,12 +1,20 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
-const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+export const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
 export const generateLineAttributesFromNode = (pos, node) => {
   // Get content node
   const contentNode = node.content;
 
   // Get node text content
   let lineAttributes = [];
+
+  // Early exit if content size is 0
+  if (contentNode.size === 0) {
+    return [{
+      lineStart: pos + 1,
+      lineNumber: 1
+    }];
+  }
   contentNode.forEach(child => {
     const nodeTextContent = child.textContent;
     const nodeStartPos = pos;

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

@@ -11,7 +11,7 @@ import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
-import { createLineNumbersDecorations } from './decorators';
+import { createLineNumbersDecorations, DECORATION_WIDGET_TYPE } from './decorators';
 const DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 export const createPlugin = ({
   useLongPressSelection = false,
@@ -20,6 +20,17 @@ export const createPlugin = ({
   api
 }) => {
   const handleDOMEvents = {};
+  const createLineNumberDecoratorsFromDecendants = editorState => {
+    let lineNumberDecorators = [];
+    editorState.doc.descendants((node, pos) => {
+      if (node.type === editorState.schema.nodes.codeBlock) {
+        lineNumberDecorators.push(...createLineNumbersDecorations(pos, node));
+        return false;
+      }
+      return true;
+    });
+    return lineNumberDecorators;
+  };
   const createWordWrappedDecoratorPluginState = (pluginState, tr, node) => {
     let decorationSetFromState = pluginState.decorations;
     if (node) {
@@ -47,21 +58,17 @@ export const createPlugin = ({
     }
     return decorationSetFromState;
   };
-  const createLineDecoratorPluginState = (pluginState, tr, node) => {
+  const createLineDecoratorPluginState = (pluginState, tr, state) => {
     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]);
-      }
-    }
+    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+    const children = decorationSetFromState.find(undefined, undefined, spec => spec.type === DECORATION_WIDGET_TYPE);
+    decorationSetFromState = decorationSetFromState.remove(children);
+
+    // regenerate all the line number for the documents code blocks
+    const lineDecorators = createLineNumberDecoratorsFromDecendants(state);
+
+    // add the newly generated line numbers to the decorations set
+    decorationSetFromState = decorationSetFromState.add(tr.doc, [...lineDecorators]);
     return decorationSetFromState;
   };
 
@@ -105,12 +112,13 @@ export const createPlugin = ({
     state: {
       init(_, state) {
         const node = findCodeBlock(state, state.selection);
+        const lineNumberDecorators = fg('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: DecorationSet.empty
+          decorations: DecorationSet.create(state.doc, lineNumberDecorators)
         };
       },
       apply(tr, pluginState, _oldState, newState) {
@@ -128,7 +136,7 @@ export const createPlugin = ({
             ...pluginState,
             pos: node ? node.pos : null,
             isNodeSelected: tr.selection instanceof NodeSelection,
-            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, node) : DecorationSet.empty
+            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : DecorationSet.empty
           };
           return newPluginState;
         }
@@ -166,7 +174,7 @@ export const createPlugin = ({
       nodeViews: {
         codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api)
       },
-      handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
+      handleClickOn: createSelectionClickHandler(['codeBlock'], target => fg('editor_support_code_block_wrapping') ? !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutterFg)) : !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection
       }),
       handleDOMEvents

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

@@ -53,6 +53,20 @@ export var CodeBlockView = /*#__PURE__*/function () {
         _this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
       }
     }));
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    _defineProperty(this, "maintainDynamicGutterSize", function () {
+      var totalLineCount = 1;
+      _this.node.forEach(function (node) {
+        var text = node.text;
+        if (text) {
+          totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      var maxDigits = totalLineCount.toString().length;
+      _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
+    });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
       dom = _DOMSerializer$render.dom,
@@ -64,7 +78,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     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')) {
+    if (fg('editor_support_code_block_wrapping')) {
+      this.maintainDynamicGutterSize();
+    } else {
       this.ensureLineNumbers();
     }
     this.handleEditorDisabledChanged();
@@ -142,7 +158,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
         this.node = node;
-        if (!fg('editor_support_code_block_wrapping')) {
+        if (fg('editor_support_code_block_wrapping')) {
+          this.maintainDynamicGutterSize();
+        } else {
           this.ensureLineNumbers();
         }
         if (browser.android) {

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

@@ -1,13 +1,21 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
-var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+export var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
 export var generateLineAttributesFromNode = function generateLineAttributesFromNode(pos, node) {
   // Get content node
   var contentNode = node.content;
 
   // Get node text content
   var lineAttributes = [];
+
+  // Early exit if content size is 0
+  if (contentNode.size === 0) {
+    return [{
+      lineStart: pos + 1,
+      lineNumber: 1
+    }];
+  }
   contentNode.forEach(function (child) {
     var nodeTextContent = child.textContent;
     var nodeStartPos = pos;

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

@@ -15,7 +15,7 @@ import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
-import { createLineNumbersDecorations } from './decorators';
+import { createLineNumbersDecorations, DECORATION_WIDGET_TYPE } from './decorators';
 var DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 export var createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
@@ -25,6 +25,17 @@ export var createPlugin = function createPlugin(_ref) {
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
     api = _ref.api;
   var handleDOMEvents = {};
+  var createLineNumberDecoratorsFromDecendants = function createLineNumberDecoratorsFromDecendants(editorState) {
+    var lineNumberDecorators = [];
+    editorState.doc.descendants(function (node, pos) {
+      if (node.type === editorState.schema.nodes.codeBlock) {
+        lineNumberDecorators.push.apply(lineNumberDecorators, _toConsumableArray(createLineNumbersDecorations(pos, node)));
+        return false;
+      }
+      return true;
+    });
+    return lineNumberDecorators;
+  };
   var createWordWrappedDecoratorPluginState = function createWordWrappedDecoratorPluginState(pluginState, tr, node) {
     var decorationSetFromState = pluginState.decorations;
     if (node) {
@@ -52,19 +63,19 @@ export var createPlugin = function createPlugin(_ref) {
     }
     return decorationSetFromState;
   };
-  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, state) {
     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));
-      }
-    }
+    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+    var children = decorationSetFromState.find(undefined, undefined, function (spec) {
+      return spec.type === DECORATION_WIDGET_TYPE;
+    });
+    decorationSetFromState = decorationSetFromState.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
+    decorationSetFromState = decorationSetFromState.add(tr.doc, _toConsumableArray(lineDecorators));
     return decorationSetFromState;
   };
 
@@ -110,12 +121,13 @@ export var createPlugin = function createPlugin(_ref) {
     state: {
       init: function init(_, state) {
         var node = findCodeBlock(state, state.selection);
+        var lineNumberDecorators = fg('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: DecorationSet.empty
+          decorations: DecorationSet.create(state.doc, lineNumberDecorators)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -131,7 +143,7 @@ export var createPlugin = function createPlugin(_ref) {
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof NodeSelection,
-            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, _node) : DecorationSet.empty
+            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : DecorationSet.empty
           });
           return newPluginState;
         }
@@ -169,7 +181,7 @@ export var createPlugin = function createPlugin(_ref) {
         }
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {
-        return !!(target.closest(".".concat(codeBlockClassNames.gutter)) || target.classList.contains(codeBlockClassNames.content));
+        return fg('editor_support_code_block_wrapping') ? !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutterFg)) : !!(target.closest(".".concat(codeBlockClassNames.gutter)) || target.classList.contains(codeBlockClassNames.content));
       }, {
         useLongPressSelection: useLongPressSelection
       }),

package/dist/types/nodeviews/code-block.d.ts

@@ -16,6 +16,10 @@ export declare class CodeBlockView {
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
     private ensureLineNumbers;
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    private maintainDynamicGutterSize;
     update(node: Node): boolean;
     ignoreMutation(record: MutationRecord | {
         type: 'selection';

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

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

package/dist/types-ts4.5/nodeviews/code-block.d.ts

@@ -16,6 +16,10 @@ export declare class CodeBlockView {
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
     private ensureLineNumbers;
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    private maintainDynamicGutterSize;
     update(node: Node): boolean;
     ignoreMutation(record: MutationRecord | {
         type: 'selection';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.3.2",
+	"version": "3.3.4",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,13 +35,13 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
 		"@atlaskit/code": "^15.5.0",
-		"@atlaskit/editor-common": "^87.8.0",
+		"@atlaskit/editor-common": "^87.10.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
 		"@atlaskit/editor-plugin-composition": "^1.2.0",
 		"@atlaskit/editor-plugin-decorations": "^1.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",