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

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.0
+
+### Minor Changes
+
+- [#128347](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128347)
+  [`e33566cebd5d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e33566cebd5d1) -
+  [ED-24175] bump @atlaskit/adf-schema to 40.8.1 and @atlassian/adf-schema-json to 1.22.0 to
+  promotecodeblocks & media in quotes, and nested expands in expands to full schema, and allow
+  quotes in panels and decisions in lists in stage0 schema, and a validator spec change
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.2.5
+
+### Patch Changes
+
+- [#127369](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127369)
+  [`95ff22b16d347`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/95ff22b16d347) -
+  [ux] ED-24374 Add support for dynamic line number positions on code block nodeview
+
 ## 3.2.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -10,4 +10,17 @@ Object.defineProperty(exports, "codeBlockPlugin", {
     return _plugin.default;
   }
 });
-var _plugin = _interopRequireDefault(require("./plugin"));
+Object.defineProperty(exports, "createDecorationSetFromTextPositions", {
+  enumerable: true,
+  get: function get() {
+    return _decorators.createDecorationSetFromTextPositions;
+  }
+});
+Object.defineProperty(exports, "generateTextPositionsFromNode", {
+  enumerable: true,
+  get: function get() {
+    return _decorators.generateTextPositionsFromNode;
+  }
+});
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _decorators = require("./pm-plugins/decorators");

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

@@ -17,7 +17,7 @@ var _actions = require("../actions");
 var _mainState = require("../pm-plugins/main-state");
 var _classNames = require("../ui/class-names");
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable, isWrapped) {
+var toDOM = function toDOM(node, contentEditable) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -26,11 +26,9 @@ var toDOM = function toDOM(node, contentEditable, isWrapped) {
   }], ['div', {
     class: _classNames.codeBlockClassNames.contentWrapper
   }, ['div', {
-    class: _classNames.codeBlockClassNames.gutter,
+    class: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFgWrap : _classNames.codeBlockClassNames.gutter,
     contenteditable: 'false'
-  }], ['div', isWrapped && (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? {
-    class: "".concat(_classNames.codeBlockClassNames.content, " ").concat(_classNames.codeBlockClassNames.contentWrapped)
-  } : {
+  }], ['div', {
     class: _classNames.codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',
@@ -43,7 +41,7 @@ var toDOM = function toDOM(node, contentEditable, isWrapped) {
   }]];
 };
 var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, isWrapped, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     (0, _classCallCheck2.default)(this, CodeBlockView);
@@ -63,7 +61,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
       }
     }));
     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), isWrapped)),
+    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,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -71,10 +69,11 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.node = _node;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.lineNumberGutter = this.dom.querySelector(".".concat(_classNames.codeBlockClassNames.gutter));
+    this.lineNumberGutter = this.dom.querySelector(".".concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFgWrap : _classNames.codeBlockClassNames.gutter));
     this.api = api;
-    this.isWrapped = isWrapped;
-    this.ensureLineNumbers();
+    if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+      this.ensureLineNumbers();
+    }
     this.handleEditorDisabledChanged();
   }
   (0, _createClass2.default)(CodeBlockView, [{
@@ -150,7 +149,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
         this.node = node;
-        this.ensureLineNumbers();
+        if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+          this.ensureLineNumbers();
+        }
         if (_utils.browser.android) {
           this.coalesceDOMElements();
           (0, _actions.resetShouldIgnoreFollowingMutations)(this.view.state, this.view.dispatch);
@@ -180,6 +181,6 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api, isWrapped) {
-  return new CodeBlockView(node, view, getPos, api, isWrapped);
+var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
+  return new CodeBlockView(node, view, getPos, api);
 };

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTextPositionsFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromTextPositions = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _classNames = require("../ui/class-names");
+var generateTextPositionsFromNode = exports.generateTextPositionsFromNode = function generateTextPositionsFromNode(pos, node) {
+  // Get content node
+  var contentNode = node.content;
+
+  // Get node text content
+  var textPositions = [];
+  contentNode.forEach(function (child) {
+    var nodeTextContent = child.textContent;
+    var nodeStartPos = pos;
+    var lineStartIndex = nodeStartPos;
+    var newLinePositions = nodeTextContent.split('\n').map(function (line) {
+      var lineLength = line.length;
+      var lineStart = lineStartIndex + 1;
+      var lineEnd = lineStart + lineLength;
+
+      // Include the newline character and increment to keep tabs on line position
+      lineStartIndex += lineLength + 1;
+      return {
+        lineStart: lineStart,
+        lineEnd: lineEnd
+      };
+    });
+    textPositions = [].concat((0, _toConsumableArray2.default)(textPositions), (0, _toConsumableArray2.default)(newLinePositions));
+  });
+  return textPositions;
+};
+var createDecorationSetFromTextPositions = exports.createDecorationSetFromTextPositions = function createDecorationSetFromTextPositions(textPositions) {
+  var decorations = textPositions.map(function (textPosition) {
+    var lineStart = textPosition.lineStart,
+      lineEnd = textPosition.lineEnd;
+    return _view.Decoration.inline(lineStart, lineEnd, {
+      class: _classNames.codeBlockClassNames.lineNumberWrapped
+    });
+  });
+  return decorations;
+};
+var createLineNumbersDecorations = exports.createLineNumbersDecorations = function createLineNumbersDecorations(pos, node) {
+  return createDecorationSetFromTextPositions(generateTextPositionsFromNode(pos, node));
+};

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

@@ -10,12 +10,15 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 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 _pluginKey = require("../plugin-key");
 var _classNames = require("../ui/class-names");
 var _utils2 = require("../utils");
 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 createPlugin = exports.createPlugin = function createPlugin(_ref) {
@@ -75,15 +78,23 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
-          shouldIgnoreFollowingMutations: false
+          shouldIgnoreFollowingMutations: false,
+          decorations: _view.DecorationSet.empty
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
         if (tr.docChanged || tr.selectionSet) {
           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);
+            }
+          }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: node ? node.pos : null,
-            isNodeSelected: tr.selection instanceof _state.NodeSelection
+            isNodeSelected: tr.selection instanceof _state.NodeSelection,
+            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _view.DecorationSet.create(tr.doc, lineNumberDecorators) : _view.DecorationSet.empty
           });
           return newPluginState;
         }
@@ -102,9 +113,15 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     },
     key: _pluginKey.pluginKey,
     props: {
+      decorations: function decorations(state) {
+        if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+          return _pluginKey.pluginKey.getState(state).decorations || _view.DecorationSet.empty;
+        }
+        return undefined;
+      },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return (0, _codeBlock.codeBlockNodeView)(node, view, getPos, api, isWrapped);
+          return (0, _codeBlock.codeBlockNodeView)(node, view, getPos, api);
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {

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

@@ -11,6 +11,8 @@ var codeBlockClassNames = exports.codeBlockClassNames = {
   end: _styles.CodeBlockSharedCssClassName.CODEBLOCK_END,
   contentWrapper: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
   gutter: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
+  gutterFgWrap: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP,
   content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
-  contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED
+  contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
+  lineNumberWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED
 };

package/dist/es2019/index.js

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

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

@@ -8,7 +8,7 @@ import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 const MATCH_NEWLINES = new RegExp('\n', 'g');
-const toDOM = (node, contentEditable, isWrapped) => ['div', {
+const toDOM = (node, contentEditable) => ['div', {
   class: 'code-block'
 }, ['div', {
   class: codeBlockClassNames.start,
@@ -16,11 +16,9 @@ const toDOM = (node, contentEditable, isWrapped) => ['div', {
 }], ['div', {
   class: codeBlockClassNames.contentWrapper
 }, ['div', {
-  class: codeBlockClassNames.gutter,
+  class: fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFgWrap : codeBlockClassNames.gutter,
   contenteditable: 'false'
-}], ['div', isWrapped && fg('editor_support_code_block_wrapping') ? {
-  class: `${codeBlockClassNames.content} ${codeBlockClassNames.contentWrapped}`
-} : {
+}], ['div', {
   class: codeBlockClassNames.content
 }, ['code', {
   'data-language': node.attrs.language || '',
@@ -32,7 +30,7 @@ const toDOM = (node, contentEditable, isWrapped) => ['div', {
   contenteditable: 'false'
 }]];
 export class CodeBlockView {
-  constructor(_node, view, getPos, api, isWrapped, cleanupEditorDisabledListener) {
+  constructor(_node, view, getPos, api, cleanupEditorDisabledListener) {
     var _api$editorDisabled, _api$editorDisabled$s;
     _defineProperty(this, "ensureLineNumbers", rafSchedule(() => {
       let lines = 1;
@@ -53,16 +51,17 @@ export class CodeBlockView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled), isWrapped));
+    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled)));
     this.getPos = getPos;
     this.view = view;
     this.node = _node;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.lineNumberGutter = this.dom.querySelector(`.${codeBlockClassNames.gutter}`);
+    this.lineNumberGutter = this.dom.querySelector(`.${fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFgWrap : codeBlockClassNames.gutter}`);
     this.api = api;
-    this.isWrapped = isWrapped;
-    this.ensureLineNumbers();
+    if (!fg('editor_support_code_block_wrapping')) {
+      this.ensureLineNumbers();
+    }
     this.handleEditorDisabledChanged();
   }
   handleEditorDisabledChanged() {
@@ -127,7 +126,9 @@ export class CodeBlockView {
         this.contentDOM.setAttribute('data-language', node.attrs.language || '');
       }
       this.node = node;
-      this.ensureLineNumbers();
+      if (!fg('editor_support_code_block_wrapping')) {
+        this.ensureLineNumbers();
+      }
       if (browser.android) {
         this.coalesceDOMElements();
         resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
@@ -151,4 +152,4 @@ export class CodeBlockView {
     this.cleanupEditorDisabledListener = undefined;
   }
 }
-export const codeBlockNodeView = (node, view, getPos, api, isWrapped) => new CodeBlockView(node, view, getPos, api, isWrapped);
+export const codeBlockNodeView = (node, view, getPos, api) => new CodeBlockView(node, view, getPos, api);

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

@@ -0,0 +1,41 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { codeBlockClassNames } from '../ui/class-names';
+export const generateTextPositionsFromNode = (pos, node) => {
+  // Get content node
+  const contentNode = node.content;
+
+  // Get node text content
+  let textPositions = [];
+  contentNode.forEach(child => {
+    const nodeTextContent = child.textContent;
+    const nodeStartPos = pos;
+    let lineStartIndex = nodeStartPos;
+    const newLinePositions = nodeTextContent.split('\n').map(line => {
+      const lineLength = line.length;
+      const lineStart = lineStartIndex + 1;
+      const lineEnd = lineStart + lineLength;
+
+      // Include the newline character and increment to keep tabs on line position
+      lineStartIndex += lineLength + 1;
+      return {
+        lineStart,
+        lineEnd
+      };
+    });
+    textPositions = [...textPositions, ...newLinePositions];
+  });
+  return textPositions;
+};
+export const createDecorationSetFromTextPositions = textPositions => {
+  const decorations = textPositions.map(textPosition => {
+    const {
+      lineStart,
+      lineEnd
+    } = textPosition;
+    return Decoration.inline(lineStart, lineEnd, {
+      class: codeBlockClassNames.lineNumberWrapped
+    });
+  });
+  return decorations;
+};
+export const createLineNumbersDecorations = (pos, node) => createDecorationSetFromTextPositions(generateTextPositionsFromNode(pos, node));

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

@@ -2,12 +2,15 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
+import { createLineNumbersDecorations } from './decorators';
 export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
@@ -61,16 +64,24 @@ export const createPlugin = ({
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
-          shouldIgnoreFollowingMutations: false
+          shouldIgnoreFollowingMutations: false,
+          decorations: DecorationSet.empty
         };
       },
       apply(tr, pluginState, _oldState, newState) {
         if (tr.docChanged || tr.selectionSet) {
           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
+            isNodeSelected: tr.selection instanceof NodeSelection,
+            decorations: fg('editor_support_code_block_wrapping') ? DecorationSet.create(tr.doc, lineNumberDecorators) : DecorationSet.empty
           };
           return newPluginState;
         }
@@ -91,8 +102,14 @@ export const createPlugin = ({
     },
     key: pluginKey,
     props: {
+      decorations(state) {
+        if (fg('editor_support_code_block_wrapping')) {
+          return pluginKey.getState(state).decorations || DecorationSet.empty;
+        }
+        return undefined;
+      },
       nodeViews: {
-        codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api, isWrapped)
+        codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api)
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection

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

@@ -5,6 +5,8 @@ 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
+  contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
+  lineNumberWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED
 };

package/dist/esm/index.js

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

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

@@ -10,7 +10,7 @@ import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable, isWrapped) {
+var toDOM = function toDOM(node, contentEditable) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -19,11 +19,9 @@ var toDOM = function toDOM(node, contentEditable, isWrapped) {
   }], ['div', {
     class: codeBlockClassNames.contentWrapper
   }, ['div', {
-    class: codeBlockClassNames.gutter,
+    class: fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFgWrap : codeBlockClassNames.gutter,
     contenteditable: 'false'
-  }], ['div', isWrapped && fg('editor_support_code_block_wrapping') ? {
-    class: "".concat(codeBlockClassNames.content, " ").concat(codeBlockClassNames.contentWrapped)
-  } : {
+  }], ['div', {
     class: codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',
@@ -36,7 +34,7 @@ var toDOM = function toDOM(node, contentEditable, isWrapped) {
   }]];
 };
 export var CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, isWrapped, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     _classCallCheck(this, CodeBlockView);
@@ -56,7 +54,7 @@ export var CodeBlockView = /*#__PURE__*/function () {
       }
     }));
     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), isWrapped)),
+    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,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -64,10 +62,11 @@ export var CodeBlockView = /*#__PURE__*/function () {
     this.node = _node;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.lineNumberGutter = this.dom.querySelector(".".concat(codeBlockClassNames.gutter));
+    this.lineNumberGutter = this.dom.querySelector(".".concat(fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFgWrap : codeBlockClassNames.gutter));
     this.api = api;
-    this.isWrapped = isWrapped;
-    this.ensureLineNumbers();
+    if (!fg('editor_support_code_block_wrapping')) {
+      this.ensureLineNumbers();
+    }
     this.handleEditorDisabledChanged();
   }
   _createClass(CodeBlockView, [{
@@ -143,7 +142,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
         this.node = node;
-        this.ensureLineNumbers();
+        if (!fg('editor_support_code_block_wrapping')) {
+          this.ensureLineNumbers();
+        }
         if (browser.android) {
           this.coalesceDOMElements();
           resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
@@ -173,6 +174,6 @@ export var CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api, isWrapped) {
-  return new CodeBlockView(node, view, getPos, api, isWrapped);
+export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
+  return new CodeBlockView(node, view, getPos, api);
 };

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

@@ -0,0 +1,42 @@
+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) {
+  // Get content node
+  var contentNode = node.content;
+
+  // Get node text content
+  var textPositions = [];
+  contentNode.forEach(function (child) {
+    var nodeTextContent = child.textContent;
+    var nodeStartPos = pos;
+    var lineStartIndex = nodeStartPos;
+    var newLinePositions = nodeTextContent.split('\n').map(function (line) {
+      var lineLength = line.length;
+      var lineStart = lineStartIndex + 1;
+      var lineEnd = lineStart + lineLength;
+
+      // Include the newline character and increment to keep tabs on line position
+      lineStartIndex += lineLength + 1;
+      return {
+        lineStart: lineStart,
+        lineEnd: lineEnd
+      };
+    });
+    textPositions = [].concat(_toConsumableArray(textPositions), _toConsumableArray(newLinePositions));
+  });
+  return textPositions;
+};
+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
+    });
+  });
+  return decorations;
+};
+export var createLineNumbersDecorations = function createLineNumbersDecorations(pos, node) {
+  return createDecorationSetFromTextPositions(generateTextPositionsFromNode(pos, node));
+};

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

@@ -5,12 +5,15 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
+import { createLineNumbersDecorations } from './decorators';
 export var createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
     useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
@@ -68,15 +71,23 @@ export var createPlugin = function createPlugin(_ref) {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
-          shouldIgnoreFollowingMutations: false
+          shouldIgnoreFollowingMutations: false,
+          decorations: DecorationSet.empty
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
         if (tr.docChanged || tr.selectionSet) {
           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);
+            }
+          }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: node ? node.pos : null,
-            isNodeSelected: tr.selection instanceof NodeSelection
+            isNodeSelected: tr.selection instanceof NodeSelection,
+            decorations: fg('editor_support_code_block_wrapping') ? DecorationSet.create(tr.doc, lineNumberDecorators) : DecorationSet.empty
           });
           return newPluginState;
         }
@@ -95,9 +106,15 @@ export var createPlugin = function createPlugin(_ref) {
     },
     key: pluginKey,
     props: {
+      decorations: function decorations(state) {
+        if (fg('editor_support_code_block_wrapping')) {
+          return pluginKey.getState(state).decorations || DecorationSet.empty;
+        }
+        return undefined;
+      },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return codeBlockNodeView(node, view, getPos, api, isWrapped);
+          return codeBlockNodeView(node, view, getPos, api);
         }
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {

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

@@ -5,6 +5,8 @@ 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
+  contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
+  lineNumberWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED
 };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 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/nodeviews/code-block.d.ts

@@ -11,8 +11,7 @@ export declare class CodeBlockView {
     getPos: getPosHandlerNode;
     view: EditorView;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    isWrapped?: boolean;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, isWrapped?: boolean, cleanupEditorDisabledListener?: (() => void) | undefined);
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -24,4 +23,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined, isWrapped: boolean | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;

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

@@ -0,0 +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[];
+export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];

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

@@ -1,8 +1,10 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type CodeBlockState = {
     pos: number | null;
     contentCopied: boolean;
     isNodeSelected: boolean;
     shouldIgnoreFollowingMutations: boolean;
+    decorations: DecorationSet;
 };
 export declare const getPluginState: (state: EditorState) => CodeBlockState;

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

@@ -1,6 +1,7 @@
 import type { IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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, }: {
@@ -37,4 +38,5 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
         };
     }> | undefined;
     isWrapped?: boolean | undefined;
+    decorations?: DecorationSet | undefined;
 }) => SafePlugin<CodeBlockState>;

package/dist/types/types.d.ts

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

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

@@ -4,6 +4,8 @@ export declare const codeBlockClassNames: {
     end: string;
     contentWrapper: string;
     gutter: string;
+    gutterFgWrap: string;
     content: string;
     contentWrapped: string;
+    lineNumberWrapped: string;
 };

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

@@ -1,3 +1,4 @@
 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/nodeviews/code-block.d.ts

@@ -11,8 +11,7 @@ export declare class CodeBlockView {
     getPos: getPosHandlerNode;
     view: EditorView;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    isWrapped?: boolean;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, isWrapped?: boolean, cleanupEditorDisabledListener?: (() => void) | undefined);
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -24,4 +23,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined, isWrapped: boolean | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;

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

@@ -0,0 +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[];
+export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];

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

@@ -1,8 +1,10 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type CodeBlockState = {
     pos: number | null;
     contentCopied: boolean;
     isNodeSelected: boolean;
     shouldIgnoreFollowingMutations: boolean;
+    decorations: DecorationSet;
 };
 export declare const getPluginState: (state: EditorState) => CodeBlockState;

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

@@ -1,6 +1,7 @@
 import type { IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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, }: {
@@ -44,4 +45,5 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
         };
     }> | undefined;
     isWrapped?: boolean | undefined;
+    decorations?: DecorationSet | undefined;
 }) => SafePlugin<CodeBlockState>;

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

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

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

@@ -4,6 +4,8 @@ export declare const codeBlockClassNames: {
     end: string;
     contentWrapper: string;
     gutter: string;
+    gutterFgWrap: string;
     content: string;
     contentWrapped: string;
+    lineNumberWrapped: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.2.4",
+	"version": "3.3.0",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,15 +33,15 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^40.3.0",
+		"@atlaskit/adf-schema": "^40.8.1",
 		"@atlaskit/code": "^15.4.0",
-		"@atlaskit/editor-common": "^87.3.0",
-		"@atlaskit/editor-plugin-analytics": "^1.6.0",
+		"@atlaskit/editor-common": "^87.6.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.10.0",
+		"@atlaskit/icon": "^22.11.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",