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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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

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,13 @@ 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)(),
+      }), _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)({
@@ -86,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",
@@ -144,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

@@ -60,7 +60,8 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
     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)"
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
     }),
     'data-label': content
   }]], ['div', {

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/es2019/nodeviews/codeBlockAdvanced.js

@@ -1,6 +1,6 @@
 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, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
@@ -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,13 @@ 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(),
+      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
       gutters({
@@ -65,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;
@@ -113,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

@@ -48,7 +48,8 @@ const toDOM = (node, formattedAriaLabel) => {
     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)"
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
     }),
     'data-label': content
   }]], ['div', {

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/esm/nodeviews/codeBlockAdvanced.js

@@ -3,7 +3,7 @@ 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, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
@@ -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,13 @@ 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(),
+      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
       gutters({
@@ -79,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",
@@ -137,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

@@ -53,7 +53,8 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
     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)"
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
     }),
     'data-label': content
   }]], ['div', {

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/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.1",
+	"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.4.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.1.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,5 +1,5 @@
 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, gutters } from '@codemirror/view';
 
@@ -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,6 +91,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				}),
 				cmTheme,
 				syntaxHighlighting(highlightStyle),
+				bracketMatching(),
 				lineNumbers(),
 				// Explicitly disable "sticky" positioning on line numbers to match
 				// Renderer behaviour
@@ -103,6 +115,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 
 	destroy() {
 		this.cleanupDisabledState?.();
+		this.cleanupCopyButtonDecoration?.();
 	}
 
 	forwardUpdate(update: ViewUpdate) {
@@ -149,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

@@ -69,6 +69,7 @@ const toDOM = (node: Node, formattedAriaLabel: string): DOMOutputSpec => {
 							textAlign: 'right',
 							color: token('color.text.subtlest'),
 							fontFamily: token('font.family.code'),
+							whiteSpace: 'pre-wrap',
 						}),
 						'data-label': content,
 					},

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;
+});