@atlaskit/editor-plugin-code-block-advanced 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 1.0.2
+
+### Patch Changes
+
+- [#105726](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105726)
+  [`2eb0f22c4b065`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2eb0f22c4b065) -
+  [ux] Fix toDOM implementation whitespace with 100+ lines of code
+- [#103918](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103918)
+  [`29844093c6ab4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/29844093c6ab4) -
+  Expose new shared state for code block plugin which indicates the current node that the copy text
+  button is hovered for. Display highlight decorations for the copy text button in the advanced code
+  block plugin.
+- Updated dependencies
+
+## 1.0.1
+
+### Patch Changes
+
+- [#102828](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102828)
+  [`e9e0bd7d3c706`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9e0bd7d3c706) -
+  [ux] Ensure lazy node view matches code block advanced snippet so there is no layout shift.
+
 ## 1.0.0
 
 ### Major Changes

package/afm-jira/tsconfig.json

@@ -0,0 +1,36 @@
+{
+	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-code-block-advanced/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../../editor-common/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-code-block/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-editor-disabled/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

@@ -0,0 +1,36 @@
+{
+	"extends": "../../../../tsconfig.entry-points.post-office.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../post-office/tsDist/@atlaskit__editor-plugin-code-block-advanced/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../../editor-common/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-code-block/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-editor-disabled/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -20,6 +20,7 @@ var _theme = require("../ui/theme");
 var _syncCMWithPM = require("./codemirrorSync/syncCMWithPM");
 var _updateCMSelection = require("./codemirrorSync/updateCMSelection");
 var _bidiCharWarning = require("./extensions/bidiCharWarning");
+var _copyButtonDecorations = require("./extensions/copyButtonDecorations");
 var _keymap = require("./extensions/keymap");
 var _loader = require("./languages/loader");
 // Based on: https://prosemirror.net/examples/codemirror/
@@ -28,11 +29,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   function CodeBlockAdvancedNodeView(node, view, getPos, config) {
     var _config$api,
       _this = this,
-      _config$api2;
+      _config$api2,
+      _config$api3;
     (0, _classCallCheck2.default)(this, CodeBlockAdvancedNodeView);
     (0, _defineProperty2.default)(this, "lineWrappingCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "languageCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "readOnlyCompartment", new _state.Compartment());
+    (0, _defineProperty2.default)(this, "copyDecoCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
     (0, _defineProperty2.default)(this, "wordWrappingEnabled", false);
     this.node = node;
@@ -48,6 +51,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 || (_config$api2 = _config$api2.editorDisabled) === null || _config$api2 === void 0 ? void 0 : _config$api2.sharedState.onChange(function () {
       _this.updateReadonlyState();
     });
+    this.cleanupCopyButtonDecoration = (_config$api3 = config.api) === null || _config$api3 === void 0 || (_config$api3 = _config$api3.codeBlock) === null || _config$api3 === void 0 ? void 0 : _config$api3.sharedState.onChange(function (_ref) {
+      var nextSharedState = _ref.nextSharedState,
+        prevSharedState = _ref.prevSharedState;
+      if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode) !== (prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.copyButtonHoverNode)) {
+        _this.addCopyButtonDecoration(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode);
+      }
+    });
     this.languageLoader = new _loader.LanguageLoader(function (lang) {
       _this.updating = true;
       _this.cm.dispatch({
@@ -57,13 +67,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     });
     this.cm = new _view.EditorView({
       doc: this.node.textContent,
-      extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), (0, _keymap.keymapExtension)({
+      extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.copyDecoCompartment.of([]), (0, _keymap.keymapExtension)({
         view: view,
         getPos: getPos,
         getNode: getNode,
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection: onMaybeNodeSelection
-      }), _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _view.lineNumbers)(), _view.EditorView.updateListener.of(function (update) {
+      }), _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _view.lineNumbers)(),
+      // Explicitly disable "sticky" positioning on line numbers to match
+      // Renderer behaviour
+      (0, _view.gutters)({
+        fixed: false
+      }), _view.EditorView.updateListener.of(function (update) {
         return _this.forwardUpdate(update);
       }), this.readOnlyCompartment.of(_view.EditorView.editable.of(this.view.editable)), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
         class: 'code-block'
@@ -81,8 +96,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
-      var _this$cleanupDisabled;
+      var _this$cleanupDisabled, _this$cleanupCopyButt;
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
+      (_this$cleanupCopyButt = this.cleanupCopyButtonDecoration) === null || _this$cleanupCopyButt === void 0 || _this$cleanupCopyButt.call(this);
     }
   }, {
     key: "forwardUpdate",
@@ -139,6 +155,15 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         this.view.dispatch(tr);
       }
     }
+  }, {
+    key: "addCopyButtonDecoration",
+    value: function addCopyButtonDecoration(node) {
+      this.updating = true;
+      this.cm.dispatch({
+        effects: [this.copyDecoCompartment.reconfigure(node && node === this.node ? _copyButtonDecorations.copyButtonDecorations : [])]
+      });
+      this.updating = false;
+    }
   }, {
     key: "updateWordWrap",
     value: function updateWordWrap(node) {

package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.codeBlockNodeWithFixedToDOM = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _styles = require("@atlaskit/editor-common/styles");
 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; }
@@ -15,30 +16,59 @@ var codeBlockClassNames = {
   start: _styles.CodeBlockSharedCssClassName.CODEBLOCK_START,
   end: _styles.CodeBlockSharedCssClassName.CODEBLOCK_END,
   contentWrapper: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
-  contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
-  gutter: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
-  content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
-  lineNumberWidget: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET
+  content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
 };
+var MATCH_NEWLINES = new RegExp('\n', 'gu');
 
-// From: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
-var _toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
-  return ['div', {
-    class: codeBlockClassNames.container
+// Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
+var _toDOM = function toDOM(node, formattedAriaLabel) {
+  var totalLineCount = 1;
+  node.forEach(function (node) {
+    var text = node.text;
+    if (text) {
+      totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+    }
+  });
+  var maxDigits = totalLineCount.toString().length;
+  var content = node.textContent.split('\n').map(function (_, i) {
+    return i + 1;
+  }).join('\n');
+  return ['pre', {
+    class: codeBlockClassNames.container,
+    style: "--lineNumberGutterWidth:".concat(maxDigits, "ch;"),
+    'data-language': node.attrs.language || ''
   }, ['div', {
     class: codeBlockClassNames.start,
     contenteditable: 'false'
   }], ['div', {
     class: codeBlockClassNames.contentWrapper
   }, ['div', {
-    class: codeBlockClassNames.gutter,
+    // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
+    // But we can't reuse that class as it adds a ::before that intefers with this approach
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      backgroundColor: "var(--ds-background-neutral, #091E420F)",
+      position: 'relative',
+      width: 'var(--lineNumberGutterWidth, 2rem)',
+      padding: "var(--ds-space-100, 8px)",
+      flexShrink: 0,
+      fontSize: '0.875rem',
+      boxSizing: 'content-box'
+    }),
     contenteditable: 'false'
-  }], ['div', {
+  }, ['div', {
+    class: 'code-block-gutter-pseudo-element',
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      textAlign: 'right',
+      color: "var(--ds-text-subtlest, #626F86)",
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
+    }),
+    'data-label': content
+  }]], ['div', {
     class: codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
-    contenteditable: contentEditable ? 'true' : 'false',
     'data-testid': 'code-block--code',
     'aria-label': formattedAriaLabel
   }, 0]]], ['div', {
@@ -49,7 +79,7 @@ var _toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
 var codeBlockNodeWithFixedToDOM = exports.codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM() {
   return _objectSpread(_objectSpread({}, _adfSchema.codeBlock), {}, {
     toDOM: function toDOM(node) {
-      return _toDOM(node, false, '');
+      return _toDOM(node, '');
     }
   });
 };

package/dist/cjs/nodeviews/extensions/copyButtonDecorations.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyButtonDecorations = void 0;
+var _state = require("@codemirror/state");
+var _view = require("@codemirror/view");
+var copyButtonDecorations = exports.copyButtonDecorations = _view.EditorView.decorations.compute([], function (state) {
+  var allTextDecoration = _view.Decoration.mark({
+    attributes: {
+      class: 'ProseMirror-fake-text-selection'
+    }
+  });
+  // Create a set of decorations for the entire document
+  var builder = new _state.RangeSetBuilder();
+  for (var i = 0; i < state.doc.lines; i++) {
+    builder.add(state.doc.line(i + 1).from, state.doc.line(i + 1).to, allTextDecoration);
+  }
+  var decorations = builder.finish();
+  return decorations;
+});

package/dist/cjs/ui/syntaxHighlightingTheme.js

@@ -46,8 +46,11 @@ var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
   tag: [_highlight.tags.string, _highlight.tags.deleted],
   color: "var(--ds-text-accent-green, #216E4E)"
 }, {
-  tag: [_highlight.tags.regexp, _highlight.tags.escape, _highlight.tags.special(_highlight.tags.string)],
-  color: "var(--ds-text, #172B4D)"
+  tag: [_highlight.tags.special(_highlight.tags.string)],
+  color: "var(--ds-text-accent-green, #216E4E)"
+}, {
+  tag: [_highlight.tags.regexp, _highlight.tags.escape],
+  color: "var(--ds-text-accent-teal, #206A83)"
 }, {
   tag: _highlight.tags.definition(_highlight.tags.variableName),
   color: "var(--ds-text, #172B4D)"

package/dist/cjs/ui/theme.js

@@ -11,7 +11,6 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
     padding: '0',
     marginTop: "var(--ds-space-100, 8px)",
     marginBottom: "var(--ds-space-100, 8px)",
-    borderRadius: "var(--ds-border-radius, 4px)",
     fontSize: '0.875rem',
     // Custom syntax styling to match existing styling
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -37,7 +36,8 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
     // Custom syntax styling to match existing styling
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 'unset',
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    borderRadius: "var(--ds-border-radius, 4px)"
   },
   '&.cm-focused .cm-cursor': {
     borderLeftColor: "var(--ds-text, #172B4D)"
@@ -45,7 +45,8 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
   '.cm-gutters': {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     border: 'none',
-    padding: "var(--ds-space-100, 8px)"
+    padding: "var(--ds-space-100, 8px)",
+    color: "var(--ds-text-subtlest, #626F86)"
   },
   '.cm-lineNumbers .cm-gutterElement': {
     paddingLeft: "var(--ds-space-0, 0px)",

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { closeBrackets } from '@codemirror/autocomplete';
-import { syntaxHighlighting } from '@codemirror/language';
+import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, EditorSelection } from '@codemirror/state';
-import { EditorView as CodeMirror, lineNumbers } from '@codemirror/view';
+import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -10,16 +10,18 @@ import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { updateCMSelection } from './codemirrorSync/updateCMSelection';
 import { bidiCharWarningExtension } from './extensions/bidiCharWarning';
+import { copyButtonDecorations } from './extensions/copyButtonDecorations';
 import { keymapExtension } from './extensions/keymap';
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 class CodeBlockAdvancedNodeView {
   // eslint-disable-next-line @typescript-eslint/max-params
   constructor(node, view, getPos, config) {
-    var _config$api, _config$api$selection, _config$api2, _config$api2$editorDi;
+    var _config$api, _config$api$selection, _config$api2, _config$api2$editorDi, _config$api3, _config$api3$codeBloc;
     _defineProperty(this, "lineWrappingCompartment", new Compartment());
     _defineProperty(this, "languageCompartment", new Compartment());
     _defineProperty(this, "readOnlyCompartment", new Compartment());
+    _defineProperty(this, "copyDecoCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
     _defineProperty(this, "wordWrappingEnabled", false);
     this.node = node;
@@ -31,6 +33,14 @@ class CodeBlockAdvancedNodeView {
     this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 ? void 0 : (_config$api2$editorDi = _config$api2.editorDisabled) === null || _config$api2$editorDi === void 0 ? void 0 : _config$api2$editorDi.sharedState.onChange(() => {
       this.updateReadonlyState();
     });
+    this.cleanupCopyButtonDecoration = (_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : (_config$api3$codeBloc = _config$api3.codeBlock) === null || _config$api3$codeBloc === void 0 ? void 0 : _config$api3$codeBloc.sharedState.onChange(({
+      nextSharedState,
+      prevSharedState
+    }) => {
+      if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode) !== (prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.copyButtonHoverNode)) {
+        this.addCopyButtonDecoration(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode);
+      }
+    });
     this.languageLoader = new LanguageLoader(lang => {
       this.updating = true;
       this.cm.dispatch({
@@ -40,13 +50,18 @@ class CodeBlockAdvancedNodeView {
     });
     this.cm = new CodeMirror({
       doc: this.node.textContent,
-      extensions: [...config.extensions, this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), keymapExtension({
+      extensions: [...config.extensions, this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.copyDecoCompartment.of([]), keymapExtension({
         view,
         getPos,
         getNode,
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection
-      }), cmTheme, syntaxHighlighting(highlightStyle), lineNumbers(), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
+      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
+      // Explicitly disable "sticky" positioning on line numbers to match
+      // Renderer behaviour
+      gutters({
+        fixed: false
+      }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
       }), bidiCharWarningExtension]
     });
@@ -60,8 +75,9 @@ class CodeBlockAdvancedNodeView {
     this.updateLanguage();
   }
   destroy() {
-    var _this$cleanupDisabled;
+    var _this$cleanupDisabled, _this$cleanupCopyButt;
     (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 ? void 0 : _this$cleanupDisabled.call(this);
+    (_this$cleanupCopyButt = this.cleanupCopyButtonDecoration) === null || _this$cleanupCopyButt === void 0 ? void 0 : _this$cleanupCopyButt.call(this);
   }
   forwardUpdate(update) {
     var _this$getPos, _this$getPos2;
@@ -108,6 +124,13 @@ class CodeBlockAdvancedNodeView {
       this.view.dispatch(tr);
     }
   }
+  addCopyButtonDecoration(node) {
+    this.updating = true;
+    this.cm.dispatch({
+      effects: [this.copyDecoCompartment.reconfigure(node && node === this.node ? copyButtonDecorations : [])]
+    });
+    this.updating = false;
+  }
   updateWordWrap(node) {
     if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
       this.updating = true;

package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -1,42 +1,72 @@
 import { codeBlock } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 const codeBlockClassNames = {
   container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
   start: CodeBlockSharedCssClassName.CODEBLOCK_START,
   end: CodeBlockSharedCssClassName.CODEBLOCK_END,
   contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
-  contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
-  gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
-  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
-  lineNumberWidget: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET
+  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
 };
+const MATCH_NEWLINES = new RegExp('\n', 'gu');
 
-// From: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
-const toDOM = (node, contentEditable, formattedAriaLabel) => ['div', {
-  class: codeBlockClassNames.container
-}, ['div', {
-  class: codeBlockClassNames.start,
-  contenteditable: 'false'
-}], ['div', {
-  class: codeBlockClassNames.contentWrapper
-}, ['div', {
-  class: codeBlockClassNames.gutter,
-  contenteditable: 'false'
-}], ['div', {
-  class: codeBlockClassNames.content
-}, ['code', {
-  'data-language': node.attrs.language || '',
-  spellcheck: 'false',
-  contenteditable: contentEditable ? 'true' : 'false',
-  'data-testid': 'code-block--code',
-  'aria-label': formattedAriaLabel
-}, 0]]], ['div', {
-  class: codeBlockClassNames.end,
-  contenteditable: 'false'
-}]];
+// Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
+const toDOM = (node, formattedAriaLabel) => {
+  let totalLineCount = 1;
+  node.forEach(node => {
+    const text = node.text;
+    if (text) {
+      totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+    }
+  });
+  const maxDigits = totalLineCount.toString().length;
+  const content = node.textContent.split('\n').map((_, i) => i + 1).join('\n');
+  return ['pre', {
+    class: codeBlockClassNames.container,
+    style: `--lineNumberGutterWidth:${maxDigits}ch;`,
+    'data-language': node.attrs.language || ''
+  }, ['div', {
+    class: codeBlockClassNames.start,
+    contenteditable: 'false'
+  }], ['div', {
+    class: codeBlockClassNames.contentWrapper
+  }, ['div', {
+    // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
+    // But we can't reuse that class as it adds a ::before that intefers with this approach
+    style: convertToInlineCss({
+      backgroundColor: "var(--ds-background-neutral, #091E420F)",
+      position: 'relative',
+      width: 'var(--lineNumberGutterWidth, 2rem)',
+      padding: "var(--ds-space-100, 8px)",
+      flexShrink: 0,
+      fontSize: '0.875rem',
+      boxSizing: 'content-box'
+    }),
+    contenteditable: 'false'
+  }, ['div', {
+    class: 'code-block-gutter-pseudo-element',
+    style: convertToInlineCss({
+      textAlign: 'right',
+      color: "var(--ds-text-subtlest, #626F86)",
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
+    }),
+    'data-label': content
+  }]], ['div', {
+    class: codeBlockClassNames.content
+  }, ['code', {
+    'data-language': node.attrs.language || '',
+    spellcheck: 'false',
+    'data-testid': 'code-block--code',
+    'aria-label': formattedAriaLabel
+  }, 0]]], ['div', {
+    class: codeBlockClassNames.end,
+    contenteditable: 'false'
+  }]];
+};
 export const codeBlockNodeWithFixedToDOM = () => {
   return {
     ...codeBlock,
-    toDOM: node => toDOM(node, false, '')
+    toDOM: node => toDOM(node, '')
   };
 };

package/dist/es2019/nodeviews/extensions/copyButtonDecorations.js

@@ -0,0 +1,16 @@
+import { RangeSetBuilder } from '@codemirror/state';
+import { EditorView as CodeMirror, Decoration } from '@codemirror/view';
+export const copyButtonDecorations = CodeMirror.decorations.compute([], state => {
+  const allTextDecoration = Decoration.mark({
+    attributes: {
+      class: 'ProseMirror-fake-text-selection'
+    }
+  });
+  // Create a set of decorations for the entire document
+  const builder = new RangeSetBuilder();
+  for (let i = 0; i < state.doc.lines; i++) {
+    builder.add(state.doc.line(i + 1).from, state.doc.line(i + 1).to, allTextDecoration);
+  }
+  const decorations = builder.finish();
+  return decorations;
+});

package/dist/es2019/ui/syntaxHighlightingTheme.js

@@ -40,8 +40,11 @@ export const highlightStyle = HighlightStyle.define([{
   tag: [tags.string, tags.deleted],
   color: "var(--ds-text-accent-green, #216E4E)"
 }, {
-  tag: [tags.regexp, tags.escape, tags.special(tags.string)],
-  color: "var(--ds-text, #172B4D)"
+  tag: [tags.special(tags.string)],
+  color: "var(--ds-text-accent-green, #216E4E)"
+}, {
+  tag: [tags.regexp, tags.escape],
+  color: "var(--ds-text-accent-teal, #206A83)"
 }, {
   tag: tags.definition(tags.variableName),
   color: "var(--ds-text, #172B4D)"

package/dist/es2019/ui/theme.js

@@ -5,7 +5,6 @@ export const cmTheme = CodeMirror.theme({
     padding: '0',
     marginTop: "var(--ds-space-100, 8px)",
     marginBottom: "var(--ds-space-100, 8px)",
-    borderRadius: "var(--ds-border-radius, 4px)",
     fontSize: '0.875rem',
     // Custom syntax styling to match existing styling
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -31,7 +30,8 @@ export const cmTheme = CodeMirror.theme({
     // Custom syntax styling to match existing styling
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 'unset',
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    borderRadius: "var(--ds-border-radius, 4px)"
   },
   '&.cm-focused .cm-cursor': {
     borderLeftColor: "var(--ds-text, #172B4D)"
@@ -39,7 +39,8 @@ export const cmTheme = CodeMirror.theme({
   '.cm-gutters': {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     border: 'none',
-    padding: "var(--ds-space-100, 8px)"
+    padding: "var(--ds-space-100, 8px)",
+    color: "var(--ds-text-subtlest, #626F86)"
   },
   '.cm-lineNumbers .cm-gutterElement': {
     paddingLeft: "var(--ds-space-0, 0px)",