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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.2
+
+### Patch Changes
+
+- [#128111](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128111)
+  [`9863ffeb3e73e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9863ffeb3e73e) -
+  remove codeblock preserve newlines ff
+- [#129049](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129049)
+  [`6b1533d389c9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1533d389c9d) -
+  [ux] ED-24511 - Convert code block line numbers inline decorations to widget decorations. The line
+  number gutter on editor code blocks should now reflect the number of lines of code, including when
+  the code block has word wrap enabled. Minor for editor-common as new analytics attribute added.
+- Updated dependencies
+
 ## 3.3.1
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -230,7 +230,8 @@ var toggleWordWrapStateForCodeBlockNode = exports.toggleWordWrapStateForCodeBloc
         attributes: {
           platform: _analytics.PLATFORMS.WEB,
           mode: _analytics.MODE.EDITOR,
-          wordWrapEnabled: updatedToggleState
+          wordWrapEnabled: updatedToggleState,
+          codeBlockNodeSize: codeBlockNode.nodeSize
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       })(tr);

package/dist/cjs/index.js

@@ -10,17 +10,4 @@ Object.defineProperty(exports, "codeBlockPlugin", {
     return _plugin.default;
   }
 });
-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");
+var _plugin = _interopRequireDefault(require("./plugin"));

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

@@ -24,12 +24,12 @@ var toDOM = function toDOM(node, contentEditable) {
     class: _classNames.codeBlockClassNames.start,
     contenteditable: 'false'
   }], ['div', {
-    class: _classNames.codeBlockClassNames.contentWrapper
+    class: "".concat(_classNames.codeBlockClassNames.contentWrapper, " ").concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') && _classNames.codeBlockClassNames.contentWrapperFg)
   }, ['div', {
-    class: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFgWrap : _classNames.codeBlockClassNames.gutter,
+    class: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFg : _classNames.codeBlockClassNames.gutter,
     contenteditable: 'false'
   }], ['div', {
-    class: _classNames.codeBlockClassNames.content
+    class: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? "".concat(_classNames.codeBlockClassNames.contentFg) : _classNames.codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
@@ -69,7 +69,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.node = _node;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.lineNumberGutter = this.dom.querySelector(".".concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFgWrap : _classNames.codeBlockClassNames.gutter));
+    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')) {
       this.ensureLineNumbers();

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

@@ -4,49 +4,58 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateTextPositionsFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromTextPositions = void 0;
+exports.generateLineAttributesFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = 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_INLINE_TYPE = 'decorationInlineType';
-var generateTextPositionsFromNode = exports.generateTextPositionsFromNode = function generateTextPositionsFromNode(pos, node) {
+var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+var generateLineAttributesFromNode = exports.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((0, _toConsumableArray2.default)(textPositions), (0, _toConsumableArray2.default)(newLinePositions));
+    lineAttributes = [].concat((0, _toConsumableArray2.default)(lineAttributes), (0, _toConsumableArray2.default)(newLineAttributes));
   });
-  return textPositions;
+  return lineAttributes;
 };
-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
-    }, {
-      type: DECORATION_INLINE_TYPE
+var createDecorationSetFromLineAttributes = exports.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(_classNames.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 _view.Decoration.widget(lineStart, createLineNumberWidget, {
+      type: DECORATION_WIDGET_TYPE,
+      side: -1
     });
   });
-  return decorations;
+  return widgetDecorations;
 };
 var createLineNumbersDecorations = exports.createLineNumbersDecorations = function createLineNumbersDecorations(pos, node) {
-  return createDecorationSetFromTextPositions(generateTextPositionsFromNode(pos, node));
+  return createDecorationSetFromLineAttributes(generateLineAttributesFromNode(pos, node));
 };

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

@@ -9,7 +9,6 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils3 = require("../utils");
 var deleteCurrentItem = function deleteCurrentItem($from) {
   return function (tr) {
@@ -58,7 +57,6 @@ 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) {
@@ -69,11 +67,7 @@ function keymapPlugin(schema) {
         if (!node) {
           return false;
         }
-        if ((0, _platformFeatureFlags.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 && (0, _utils.isEmptyNode)(schema)($cursor.node()) && ((0, _utils2.hasParentNodeOfType)(layoutColumn)(state.selection) || (0, _utils2.hasParentNodeOfType)(table)(state.selection))) {

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

@@ -48,7 +48,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           decorationSetFromState = decorationSetFromState.remove(currentWrappedBlockDecorationSet);
         } else {
           var wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {
-            class: _classNames.codeBlockClassNames.wrapped
+            class: _classNames.codeBlockClassNames.contentFgWrapped
           }, {
             type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
           } // Allows for quick filtering of decorations while using `find`

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

@@ -11,9 +11,11 @@ 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,
-  lineNumberWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED,
-  wrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED
+  // Feature Gate editor_support_code_block_wrapping:
+  contentWrapperFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG,
+  contentFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG,
+  contentFgWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED,
+  lineNumberWidget: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET,
+  gutterFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG
 };

package/dist/es2019/actions.js

@@ -241,7 +241,8 @@ export const toggleWordWrapStateForCodeBlockNode = editorAnalyticsAPI => (state,
       attributes: {
         platform: PLATFORMS.WEB,
         mode: MODE.EDITOR,
-        wordWrapEnabled: updatedToggleState
+        wordWrapEnabled: updatedToggleState,
+        codeBlockNodeSize: codeBlockNode.nodeSize
       },
       eventType: EVENT_TYPE.TRACK
     })(tr);

package/dist/es2019/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/es2019/nodeviews/code-block.js

@@ -14,12 +14,12 @@ const toDOM = (node, contentEditable) => ['div', {
   class: codeBlockClassNames.start,
   contenteditable: 'false'
 }], ['div', {
-  class: codeBlockClassNames.contentWrapper
+  class: `${codeBlockClassNames.contentWrapper} ${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') ? `${codeBlockClassNames.contentFg}` : codeBlockClassNames.content
 }, ['code', {
   'data-language': node.attrs.language || '',
   spellcheck: 'false',
@@ -57,7 +57,7 @@ export class CodeBlockView {
     this.node = _node;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.lineNumberGutter = this.dom.querySelector(`.${fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFgWrap : codeBlockClassNames.gutter}`);
+    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')) {
       this.ensureLineNumbers();

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

@@ -1,44 +1,53 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
-const DECORATION_INLINE_TYPE = 'decorationInlineType';
-export const generateTextPositionsFromNode = (pos, node) => {
+const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+export const generateLineAttributesFromNode = (pos, node) => {
   // Get content node
   const contentNode = node.content;
 
   // Get node text content
-  let textPositions = [];
+  let lineAttributes = [];
   contentNode.forEach(child => {
     const nodeTextContent = child.textContent;
     const nodeStartPos = pos;
     let lineStartIndex = nodeStartPos;
-    const newLinePositions = nodeTextContent.split('\n').map(line => {
+    const newLineAttributes = nodeTextContent.split('\n').map((line, index) => {
       const lineLength = line.length;
       const lineStart = lineStartIndex + 1;
-      const lineEnd = lineStart + lineLength;
+      const lineNumber = index + 1;
 
       // Include the newline character and increment to keep tabs on line position
       lineStartIndex += lineLength + 1;
       return {
         lineStart,
-        lineEnd
+        lineNumber
       };
     });
-    textPositions = [...textPositions, ...newLinePositions];
+    lineAttributes = [...lineAttributes, ...newLineAttributes];
   });
-  return textPositions;
+  return lineAttributes;
 };
-export const createDecorationSetFromTextPositions = textPositions => {
-  const decorations = textPositions.map(textPosition => {
+export const createDecorationSetFromLineAttributes = lineAttributes => {
+  const widgetDecorations = lineAttributes.map(lineAttribute => {
     const {
       lineStart,
-      lineEnd
-    } = textPosition;
-    return Decoration.inline(lineStart, lineEnd, {
-      class: codeBlockClassNames.lineNumberWrapped
-    }, {
-      type: DECORATION_INLINE_TYPE
+      lineNumber
+    } = lineAttribute;
+
+    // Passing a function to create the widget rather than directly passing a widget, as per ProseMirror docs.
+    const createLineNumberWidget = () => {
+      const widget = document.createElement('span');
+      widget.textContent = `${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 const createLineNumbersDecorations = (pos, node) => createDecorationSetFromTextPositions(generateTextPositionsFromNode(pos, node));
+export const createLineNumbersDecorations = (pos, node) => createDecorationSetFromLineAttributes(generateLineAttributesFromNode(pos, node));

package/dist/es2019/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';
 const deleteCurrentItem = $from => tr => {
   return tr.delete($from.before($from.depth), $from.after($from.depth));
@@ -50,7 +49,6 @@ export function keymapPlugin(schema) {
       const {
         codeBlock,
         listItem,
-        paragraph,
         table,
         layoutColumn
       } = state.schema.nodes;
@@ -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/es2019/pm-plugins/main.js

@@ -36,7 +36,7 @@ export const createPlugin = ({
           decorationSetFromState = decorationSetFromState.remove(currentWrappedBlockDecorationSet);
         } else {
           const wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
-            class: codeBlockClassNames.wrapped
+            class: codeBlockClassNames.contentFgWrapped
           }, {
             type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
           } // Allows for quick filtering of decorations while using `find`

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

@@ -5,9 +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,
-  wrapped: CodeBlockSharedCssClassName.CODEBLOCK_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

@@ -220,7 +220,8 @@ export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateFor
         attributes: {
           platform: PLATFORMS.WEB,
           mode: MODE.EDITOR,
-          wordWrapEnabled: updatedToggleState
+          wordWrapEnabled: updatedToggleState,
+          codeBlockNodeSize: codeBlockNode.nodeSize
         },
         eventType: EVENT_TYPE.TRACK
       })(tr);

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/decorators.js

@@ -1,45 +1,54 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
-var DECORATION_INLINE_TYPE = 'decorationInlineType';
-export var generateTextPositionsFromNode = function generateTextPositionsFromNode(pos, node) {
+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
-    }, {
-      type: DECORATION_INLINE_TYPE
+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

@@ -41,7 +41,7 @@ export var createPlugin = function createPlugin(_ref) {
           decorationSetFromState = decorationSetFromState.remove(currentWrappedBlockDecorationSet);
         } else {
           var wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
-            class: codeBlockClassNames.wrapped
+            class: codeBlockClassNames.contentFgWrapped
           }, {
             type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
           } // Allows for quick filtering of decorations while using `find`

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

@@ -5,9 +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,
-  wrapped: CodeBlockSharedCssClassName.CODEBLOCK_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/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/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,9 +4,10 @@ export declare const codeBlockClassNames: {
     end: string;
     contentWrapper: string;
     gutter: string;
-    gutterFgWrap: string;
     content: string;
-    contentWrapped: string;
-    lineNumberWrapped: string;
-    wrapped: 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/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/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,9 +4,10 @@ export declare const codeBlockClassNames: {
     end: string;
     contentWrapper: string;
     gutter: string;
-    gutterFgWrap: string;
     content: string;
-    contentWrapped: string;
-    lineNumberWrapped: string;
-    wrapped: string;
+    contentWrapperFg: string;
+    contentFg: string;
+    contentFgWrapped: string;
+    lineNumberWidget: string;
+    gutterFg: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.3.1",
+	"version": "3.3.2",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,14 +34,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
-		"@atlaskit/code": "^15.4.0",
-		"@atlaskit/editor-common": "^87.6.0",
+		"@atlaskit/code": "^15.5.0",
+		"@atlaskit/editor-common": "^87.8.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.11.0",
+		"@atlaskit/icon": "^22.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -98,9 +98,6 @@
 		},
 		"platform.editor.live-view.disable-editing-in-view-mode_fi1rx": {
 			"type": "boolean"
-		},
-		"platform.editor.codeblock-preserve-newlines_54r3m": {
-			"type": "boolean"
 		}
 	}
 }