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

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -3,9 +3,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 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';
@@ -13,6 +13,7 @@ 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/
@@ -21,11 +22,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   function CodeBlockAdvancedNodeView(node, view, getPos, config) {
     var _config$api,
       _this = this,
-      _config$api2;
+      _config$api2,
+      _config$api3;
     _classCallCheck(this, CodeBlockAdvancedNodeView);
     _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;
@@ -41,6 +44,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 LanguageLoader(function (lang) {
       _this.updating = true;
       _this.cm.dispatch({
@@ -50,13 +60,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     });
     this.cm = new CodeMirror({
       doc: this.node.textContent,
-      extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), keymapExtension({
+      extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.copyDecoCompartment.of([]), keymapExtension({
         view: view,
         getPos: getPos,
         getNode: getNode,
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection: onMaybeNodeSelection
-      }), cmTheme, syntaxHighlighting(highlightStyle), lineNumbers(), CodeMirror.updateListener.of(function (update) {
+      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
+      // Explicitly disable "sticky" positioning on line numbers to match
+      // Renderer behaviour
+      gutters({
+        fixed: false
+      }), CodeMirror.updateListener.of(function (update) {
         return _this.forwardUpdate(update);
       }), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
@@ -74,8 +89,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return _createClass(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",
@@ -132,6 +148,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 : [])]
+      });
+      this.updating = false;
+    }
   }, {
     key: "updateWordWrap",
     value: function updateWordWrap(node) {

package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -2,36 +2,66 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { codeBlock } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 var 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
 };
+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: 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: 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', {
@@ -42,7 +72,7 @@ var _toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
 export var codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM() {
   return _objectSpread(_objectSpread({}, codeBlock), {}, {
     toDOM: function toDOM(node) {
-      return _toDOM(node, false, '');
+      return _toDOM(node, '');
     }
   });
 };

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

@@ -0,0 +1,16 @@
+import { RangeSetBuilder } from '@codemirror/state';
+import { EditorView as CodeMirror, Decoration } from '@codemirror/view';
+export var copyButtonDecorations = CodeMirror.decorations.compute([], function (state) {
+  var allTextDecoration = Decoration.mark({
+    attributes: {
+      class: 'ProseMirror-fake-text-selection'
+    }
+  });
+  // Create a set of decorations for the entire document
+  var builder = new 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/esm/ui/syntaxHighlightingTheme.js

@@ -40,8 +40,11 @@ export var 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/esm/ui/theme.js

@@ -5,7 +5,6 @@ export var 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 var 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 var 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)",

package/dist/types/nodeviews/codeBlockAdvanced.d.ts

@@ -15,12 +15,14 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private lineWrappingCompartment;
     private languageCompartment;
     private readOnlyCompartment;
+    private copyDecoCompartment;
     private node;
     private getPos;
     private cm;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
     private cleanupDisabledState;
+    private cleanupCopyButtonDecoration;
     private languageLoader;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
     destroy(): void;
@@ -29,6 +31,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateReadonlyState;
     private updateLanguage;
     private selectCodeBlockNode;
+    private addCopyButtonDecoration;
     private wordWrappingEnabled;
     private updateWordWrap;
     update(node: PMNode): boolean;

package/dist/types/nodeviews/extensions/copyButtonDecorations.d.ts

@@ -0,0 +1 @@
+export declare const copyButtonDecorations: import("@codemirror/state").Extension;

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

@@ -15,12 +15,14 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private lineWrappingCompartment;
     private languageCompartment;
     private readOnlyCompartment;
+    private copyDecoCompartment;
     private node;
     private getPos;
     private cm;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
     private cleanupDisabledState;
+    private cleanupCopyButtonDecoration;
     private languageLoader;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
     destroy(): void;
@@ -29,6 +31,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateReadonlyState;
     private updateLanguage;
     private selectCodeBlockNode;
+    private addCopyButtonDecoration;
     private wordWrappingEnabled;
     private updateWordWrap;
     update(node: PMNode): boolean;

package/dist/types-ts4.5/nodeviews/extensions/copyButtonDecorations.d.ts

@@ -0,0 +1 @@
+export declare const copyButtonDecorations: import("@codemirror/state").Extension;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,12 +33,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^99.1.0",
-		"@atlaskit/editor-plugin-code-block": "^3.5.0",
+		"@atlaskit/editor-common": "^99.5.0",
+		"@atlaskit/editor-plugin-code-block": "^3.6.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-selection": "^1.6.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",

package/src/nodeviews/codeBlockAdvanced.ts

@@ -1,7 +1,7 @@
 import { closeBrackets } from '@codemirror/autocomplete';
-import { syntaxHighlighting } from '@codemirror/language';
+import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, Extension, EditorSelection } from '@codemirror/state';
-import { EditorView as CodeMirror, lineNumbers, ViewUpdate } from '@codemirror/view';
+import { EditorView as CodeMirror, lineNumbers, ViewUpdate, gutters } from '@codemirror/view';
 
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
@@ -22,6 +22,7 @@ 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';
 
@@ -38,12 +39,14 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private lineWrappingCompartment = new Compartment();
 	private languageCompartment = new Compartment();
 	private readOnlyCompartment = new Compartment();
+	private copyDecoCompartment = new Compartment();
 	private node: PMNode;
 	private getPos: getPosHandlerNode;
 	private cm: CodeMirror;
 	private selectionAPI: EditorSelectionAPI | undefined;
 	private maybeTryingToReachNodeSelection = false;
 	private cleanupDisabledState: (() => void) | undefined;
+	private cleanupCopyButtonDecoration: (() => void) | undefined;
 	private languageLoader: LanguageLoader;
 
 	// eslint-disable-next-line @typescript-eslint/max-params
@@ -57,6 +60,13 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.cleanupDisabledState = config.api?.editorDisabled?.sharedState.onChange(() => {
 			this.updateReadonlyState();
 		});
+		this.cleanupCopyButtonDecoration = config.api?.codeBlock?.sharedState.onChange(
+			({ nextSharedState, prevSharedState }) => {
+				if (nextSharedState?.copyButtonHoverNode !== prevSharedState?.copyButtonHoverNode) {
+					this.addCopyButtonDecoration(nextSharedState?.copyButtonHoverNode);
+				}
+			},
+		);
 		this.languageLoader = new LanguageLoader((lang) => {
 			this.updating = true;
 			this.cm.dispatch({
@@ -71,6 +81,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				...config.extensions,
 				this.lineWrappingCompartment.of([]),
 				this.languageCompartment.of([]),
+				this.copyDecoCompartment.of([]),
 				keymapExtension({
 					view,
 					getPos,
@@ -80,7 +91,11 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				}),
 				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(),
@@ -100,6 +115,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 
 	destroy() {
 		this.cleanupDisabledState?.();
+		this.cleanupCopyButtonDecoration?.();
 	}
 
 	forwardUpdate(update: ViewUpdate) {
@@ -146,6 +162,18 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		}
 	}
 
+	private addCopyButtonDecoration(node: PMNode | undefined) {
+		this.updating = true;
+		this.cm.dispatch({
+			effects: [
+				this.copyDecoCompartment.reconfigure(
+					node && node === this.node ? copyButtonDecorations : [],
+				),
+			],
+		});
+		this.updating = false;
+	}
+
 	private wordWrappingEnabled = false;
 
 	private updateWordWrap(node: PMNode) {

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -1,59 +1,104 @@
 import { codeBlock } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { NodeSpec, DOMOutputSpec, Node } from '@atlaskit/editor-prosemirror/model';
+import { token } from '@atlaskit/tokens';
 
 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,
 };
 
-// From: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
-const toDOM = (node: Node, contentEditable: boolean, formattedAriaLabel: string): DOMOutputSpec => [
-	'div',
-	{ class: codeBlockClassNames.container },
-	['div', { class: codeBlockClassNames.start, contenteditable: 'false' }],
-	[
-		'div',
+const MATCH_NEWLINES = new RegExp('\n', 'gu');
+
+// Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
+const toDOM = (node: Node, formattedAriaLabel: string): DOMOutputSpec => {
+	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.contentWrapper,
+			class: codeBlockClassNames.container,
+			style: `--lineNumberGutterWidth:${maxDigits}ch;`,
+			'data-language': node.attrs.language || '',
 		},
+		['div', { class: codeBlockClassNames.start, contenteditable: 'false' }],
 		[
 			'div',
 			{
-				class: codeBlockClassNames.gutter,
-				contenteditable: 'false',
-			},
-		],
-		[
-			'div',
-			{
-				class: codeBlockClassNames.content,
+				class: codeBlockClassNames.contentWrapper,
 			},
 			[
-				'code',
+				'div',
 				{
-					'data-language': node.attrs.language || '',
-					spellcheck: 'false',
-					contenteditable: contentEditable ? 'true' : 'false',
-					'data-testid': 'code-block--code',
-					'aria-label': formattedAriaLabel,
+					// 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: token('color.background.neutral'),
+						position: 'relative',
+						width: 'var(--lineNumberGutterWidth, 2rem)',
+						padding: token('space.100'),
+						flexShrink: 0,
+						fontSize: '0.875rem',
+						boxSizing: 'content-box',
+					}),
+					contenteditable: 'false',
 				},
-				0,
+				[
+					'div',
+					{
+						class: 'code-block-gutter-pseudo-element',
+						style: convertToInlineCss({
+							textAlign: 'right',
+							color: token('color.text.subtlest'),
+							fontFamily: token('font.family.code'),
+							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' }],
-];
+		['div', { class: codeBlockClassNames.end, contenteditable: 'false' }],
+	];
+};
 
 export const codeBlockNodeWithFixedToDOM = (): NodeSpec => {
 	return {
 		...codeBlock,
-		toDOM: (node) => toDOM(node, false, ''),
+		toDOM: (node) => toDOM(node, ''),
 	};
 };

package/src/nodeviews/extensions/copyButtonDecorations.ts

@@ -0,0 +1,15 @@
+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<Decoration>();
+	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/src/nodeviews/lazyCodeBlockAdvanced.ts

@@ -5,7 +5,6 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
-
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 
 interface Props {

package/src/ui/syntaxHighlightingTheme.ts

@@ -38,7 +38,14 @@ export const highlightStyle = HighlightStyle.define([
 		color: token('color.text.accent.blue'),
 	},
 	{ tag: [tags.string, tags.deleted], color: token('color.text.accent.green') },
-	{ tag: [tags.regexp, tags.escape, tags.special(tags.string)], color: token('color.text') },
+	{
+		tag: [tags.special(tags.string)],
+		color: token('color.text.accent.green'),
+	},
+	{
+		tag: [tags.regexp, tags.escape],
+		color: token('color.text.accent.teal'),
+	},
 	{ tag: tags.definition(tags.variableName), color: token('color.text') },
 	{ tag: tags.local(tags.variableName), color: token('color.text') },
 	{ tag: [tags.typeName, tags.namespace], color: token('color.text.accent.blue') },

package/src/ui/theme.ts

@@ -8,7 +8,6 @@ export const cmTheme = CodeMirror.theme({
 		padding: '0',
 		marginTop: token('space.100'),
 		marginBottom: token('space.100'),
-		borderRadius: token('border.radius'),
 		fontSize: '0.875rem',
 		// Custom syntax styling to match existing styling
 		// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -35,6 +34,7 @@ export const cmTheme = CodeMirror.theme({
 		// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
 		lineHeight: 'unset',
 		fontFamily: token('font.family.code'),
+		borderRadius: token('border.radius'),
 	},
 	'&.cm-focused .cm-cursor': {
 		borderLeftColor: token('color.text'),
@@ -43,6 +43,7 @@ export const cmTheme = CodeMirror.theme({
 		backgroundColor: token('color.background.neutral'),
 		border: 'none',
 		padding: token('space.100'),
+		color: token('color.text.subtlest'),
 	},
 	'.cm-lineNumbers .cm-gutterElement': {
 		paddingLeft: token('space.0'),